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

【问题标题】：jQuery click one DIV and hide all other DIVS detectjQuery单击一个DIV并隐藏所有其他DIVS检测
【发布时间】：2012-07-10 14:45:44
【问题描述】：

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

因此，当他们单击箭头时，如果打开所有其他线程，则所有其他线程将关闭，并且箭头将被重置并且该箭头将打开。

【问题讨论】：

标签： php jquery find slidedown

【解决方案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 sprites 来设计箭头。

【讨论】：

或者你可以create arrows (among other shapes) with CSS！

【解决方案2】：

$("[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 有两个参数。我不确定那有什么作用。另外，它们似乎是相同的。

【讨论】：

【解决方案3】：

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

You can see a demo here. 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>

【讨论】：