jQuery单击一个DIV并隐藏所有其他DIV检测 - jQuery click one DIV and hide all other DIVS detect

我的网站上有一个票务系统。有几个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");

因此，当他们点击箭头时，如果打开，所有其他线程都将关闭，箭头将重置，而这个线程将打开。

class并不是为了指向某个唯一的东西而设计的，您应该这样做：

<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精灵来设计箭头。

$("[class^=ticket_threads]").click(function () {
   //your code
   $("[class^ticket_threads]").not(this).hide();
   $("[class^ticket_arrow]").not($(this).siblings("[class^=ticket_arrow"))
      .attr('src' ...)
});

您可以使用类似的方法来选择处理程序中的所有但当前元素。

我也不知道为什么你对click有两个论点。我不确定这有什么作用。此外，它们似乎完全相同。

您需要混合使用父元素和子元素。以下是我的解决方案。查看演示并下载代码，然后根据您的需要进行修改。

您可以在此处看到演示 JsFiddle来源：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Test</title>
            <style type="text/css">
                h1{text-decoration:underline;padding:5px;cursor:pointer}
            </style>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
            <script type="text/javascript">
            $(document).ready(function() {
                /*bind all clicks on an 'h1' element to trigger this function*/
                $('h1').click(function() {
                    /*if the element following this one has the class 'parent' and the class 'showMe'*/
                    if($(this).next('.parent').hasClass('showMe')) {
                        /*remove the class 'showMe' from all elements with the class 'parent' or 'child'*/
                        $('.parent, .child').removeClass('showMe').hide();
                    }
                    /*if the element following this one has the class 'parent' and does not have the class 'showMe'*/
                    else {
                        /*remove the class 'showMe' from all elements with the class 'parent' or 'child'*/
                        $('.parent, .child').removeClass('showMe').hide();
                        /*add the class 'showMe' to the element following this one with the class 'parent'*/
                        $(this).next('.parent').addClass('showMe').show();
                    }
                });
                /*bind all clicks on an 'h2' element to trigger this function*/
                $('h2').click(function() {
                    /*if the element following this one has the class 'child' and the class 'showMe'*/
                    if($(this).next('.child').hasClass('showMe')) {
                        /*remove the class 'showMe' from all elements with the class 'child'*/
                        $('.child').removeClass('showMe').hide();
                    }
                    else {
                        /*remove the class 'showMe' from all elements with the class 'child'*/
                        $('.child').removeClass('showMe').hide();
                        /*add the class 'showMe' to the element following this one with the class 'child'*/
                        $(this).next('.child').addClass('showMe').show();
                    }
                });
                /*hide all elements with the class 'parent' or 'child'*/
                $('.parent, .child').hide();
                /*simulate a click on the first 'h1' element and the first 'h2' element within that 'h1' element*/
                $('h1:first, h1:first h2:first').click();
            });
            </script>
        </head>
        <body>
            <h1>Yacht 1</h1>
            <div class="parent">
                <h2>Description 1.1</h2>
                <div class="child">
                    <p>Content 1.1</p>
                    <p>Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi quis nostrud exercitation lorem ipsum dolor sit amet. Cupidatat non proident, duis aute irure dolor eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.</p>
                </div>
                <h2>Images</h2>
                <div class="child">
                    <p>Content 1.2 Images here</p>
                    <p>Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi quis nostrud exercitation lorem ipsum dolor sit amet. Cupidatat non proident, duis aute irure dolor eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.</p>
                </div>
                <h2>Extras</h2>
                <div class="child">
                    <p>Content 1.3</p>
                    <p>Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi quis nostrud exercitation lorem ipsum dolor sit amet. Cupidatat non proident, duis aute irure dolor eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.</p>
                </div>
            </div>
            <h1>Yacht 2</h1>
            <div class="parent">
                <h2>Description 2.1</h2>
                <div class="child">
                    <p>Content 2.1</p>
                    <p>Sed quia consequuntur magni dolores eos et aut officiis debitis aut rerum necessitatibus tempora incidunt ut labore et dolore. Omnis dolor repellendus. Itaque earum rerum hic tenetur a sapiente delectus, iste natus error sit voluptatem ut enim ad minima veniam.</p>
                    <p>Magnam aliquam quaerat voluptatem. Qui ratione voluptatem sequi nesciunt. Nisi ut aliquid ex ea commodi consequatur? Sed quia non numquam eius modi id est laborum et dolorum fuga.</p>
                </div>
                <h2>Images 2.2</h2>
                <div class="child">
                    <p>Images here  2.2</p>
                    <p>Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi quis nostrud exercitation lorem ipsum dolor sit amet. Cupidatat non proident, duis aute irure dolor eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.</p>
                </div>
                <h2>Extras 2.3</h2>
                <div class="child">
                    <p>Content 2.3</p>
                    <p>Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi quis nostrud exercitation lorem ipsum dolor sit amet. Cupidatat non proident, duis aute irure dolor eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.</p>
                </div>
            </div>
        </body>
    </html>