Question

需要一些帮助。我有以下html / javascript

<div class="quick-links block">
        <div class="main-wrap container">
            <div class="row">
                <div class="col-sm-4 first column">
                    <div class="inner-content">
                        <h2>Admissions<a><img src="/sites/all/themes/merge/img/blue-down.png" /></a></h2>
                        <ul>
                            <li><a>Apply Now</a></li>
                            <li><a>Schedule a Visit</a></li>
                            <li><a>Student Life</a></li>
                        </ul>
                    </div><!--end inner-content-->
                </div><!--end col-->
                <div class="col-sm-4 second column">
                    <div class="inner-content">
                        <h2>Academics<a><img src="/sites/all/themes/merge/img/green-down.png" /></a></h2>
                        <ul>
                            <li><a>A Liberal Arts Degree</a></li>
                            <li><a>College of Arts &amp; Sciences</a></li>
                            <li><a>College of Business</a></li>
                            <li><a>College of Education</a></li>
                            <li><a>College of Health Sciences</a></li>
                        </ul>
                    </div><!--end inner-content-->
                </div><!--end col-->
                <div class="col-sm-4 third column">
                    <div class="inner-content">
                        <h2>Student Life<a><img src="/sites/all/themes/merge/img/gold-down.png" /></a></h2>
                        <ul>
                            <li><a>Campus Photo Tour</a></li>
                            <li><a>Student Organizations</a></li>
                            <li><a>Residence Life</a></li>
                            <li><a>Facilities</a></li>
                            <li><a>Food &amp; Drink</a></li>
                        </ul>
                    </div><!--end inner-content-->
                </div><!--end col-->
            </div><!--end row-->
        </div><!--end container-->
    </div><!--end quick-links-->

    <!-- ================================================ -->
    <!-- === QUICK LINKS JAVASCRIPT === -->
    <!-- ================================================ -->

    <script>

        var quickSection = $('.quick-links');
        var quickContent = $('.quick-links .row .inner-content')
        var quickList = $('.quick-links .row .inner-content ul');

        if ( quickSection.is('*') ) {

            quickContent.find("img").click(function() {
                $(this).closest(".inner-content").find("ul").slideToggle("slow");
                $(this).toggleClass("flipped");
            });
        }

    </script>

我需要关闭显示的ul，如果找到另一个＆＃39;单击img。基本上只需要关闭当前的ul，如果打开另一个。非常感谢任何帮助。

Answer 1

您也可以这样做

quickContent.find("img").click(function() {
  $(this).closest(".main-wrap").find("ul").slideUp("slow"); // close all other
  $(this).closest(".column").find("ul").slideDown("slow"); // open current 
});

Answer 2

试试这个：

$(this).closest(".inner-content").find("ul").slideToggle("slow")
       .closest(".column").siblings().find("ul").slideUp("slow");

http://api.jquery.com/siblings

jQuery关闭ul如果打开其他的话

2 个答案: