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

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

Answer 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的两个论点。我不确定那会做什么。而且他们似乎完全相同。

Answer 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>

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

3 个答案: