jQuery单击一个DIV并隐藏所有其他DIVS检测

Question

我的网站上有票务系统.有几个div显示原始票据,然后隐藏在这些div之间的隐藏div显示客户和员工的交互.我想打开一个div,关闭其他div然后如果他们打开另一个div这个和所有其他div关闭显示他们点击打开的那个.

jQuery(document).ready(function () {
    // ****** Click the ticket DIV
    $(".ticket_thread_7").click(function () {

        // Slide the SUB DIVs associated with this ticket
        $(".ticket_threads_7").slideDown("slow");

        // Turn the arrow from DOWN.png to UP.png
        $('.ticket_arrow_7').attr("src", "http://cdn.com/assets/imgs/up.png");

    // ****** If they have click the arrow again    
    }, function () {

        // .. close this ticket
        $(".ticket_threads_7").slideDown("slow");

        // .. also return the image back to normal
        $('.ticket_arrow_7').attr("src", "http://cdn.com/assets/imgs/up.png");

        return false;
    });
});

HTML

<div class="ticket_thread_7">
    <p>I want to return my order <img src="http://cdn.com/assets/imgs/up.png" class="ticket_arrow_7"></p>
    <div class="ticket_threads_7" style="display:none">

        <div class="staff_7_1"><p>We cannot accept a return on this item.</p></div>
        <div class="cus_7_2"><p>Why not.</p></div>
        <div class="staff_7_3"><p>Please visit cdn.com/returnterms to see our policy, apologies.</p></div>

    </div>
</div>

目前的解决方案很好.你可以想象.这是一个动态的PHP驱动的网站,所以我们在网站上有很多门票.我想知道在jQuery中我可以使用命令获取页面上的所有其他DIV元素ID并隐藏它们.

我可以这样做:

// Hide all other current open threads and reset their arrows
$(".ticket_threads_7*!=7").slideDown("slow");
$('.ticket_arrow_'*!=7).attr("src", "http://cdn.com/assets/imgs/up.png");

因此,当他们点击箭头时,所有其他线程,如果打开将关闭,箭头将被重置,这个将打开.

Answer 1

类不是为了指向一些独特的东西,你应该做这样的事情:

<div class="ticket_thread" id="ticket_thread_7">
   <p>...<img class="arrow" /></p>
   <div class="details">
      ...
   </div>
</div>

然后,很容易做你想做的事情:

$(".ticket_thread").not(this).find('.details').slideDown("slow");
$(".ticket_thread").not(this).find('.arrow').attr("src", "http://cdn.com/assets/imgs/up.png");

另外,请考虑使用类和CSS sprite来设计箭头.