单击 parent link 时 slideToggle 不起作用

Question

我在页脚中有一个 link 的列表，然后当您单击底部的标题时，每个面板都会向上滑动 link。

如果一个面板处于打开状态并且我单击页脚上的另一个 link，则打开的面板会关闭并且刚刚单击的页脚中的 link 会展开。

如果我在页脚中单击 link，面板会向上滑动，但是，如果 re-click 在页脚中单击相同的 link 以关闭面板，它会向下和向后滑动又起来了。

有什么想法吗？

这是代码和 jsFiddle

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Header</title>

<!-- Bootstrap -->
<link href="http://www.swimmingcover.co.uk/new_build/bootstrapgrid/css/bootstrap.min.css" rel="stylesheet">
<link href="http://www.swimmingcover.co.uk/new_build/bootstrapgrid/css/footer.css" rel="stylesheet" type="text/css">

</head>

<body>
<div id="container">

    <footer style="position:absolute; bottom:0px;">
        <ul id="footer_menu">
            <li id="ftr_information" class="ftr_section col-md-2">
                <span class="ftr_ttl">Title 1 <span class="fa fa-chevron-down"></span></span>
                <ul class="footer_sublist">
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                </ul>
            </li>
            <li id="ftr_gifts" class="ftr_section col-md-2">
                <span class="ftr_ttl">Title 2 <span class="fa fa-chevron-down"></span></span>
                <ul class="footer_sublist">
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                </ul>
            </li>
            <li id="ftr_birthday" class="ftr_section col-md-2">
                <span class="ftr_ttl">Title 3 <span class="fa fa-chevron-down"></span></span>
                <ul class="footer_sublist">
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                </ul>
            </li>
            <li id="ftr_seasonal" class="ftr_section col-md-2">
                <span class="ftr_ttl">Title 4 <span class="fa fa-chevron-down"></span></span>
                <ul class="footer_sublist">
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                </ul>
            </li>
            <li id="ftr_occasion" class="ftr_section col-md-2">
                <span class="ftr_ttl">Title 5<span class="fa fa-chevron-down"></span></span>
                <ul class="footer_sublist">
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                    <li><a href="">Link 1 &#187;</a></li>
                </ul>
            </li>
        </ul>
    </footer>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$('.ftr_section .ftr_ttl').click(function () {
    $('.footer_sublist').slideUp();         
    $(this).closest(".ftr_section").find("ul").slideToggle({direction:"up"}, 300);          
    $(this).closest(".ftr_section").find(".fa-chevron-down, .fa-chevron-up").toggleClass('fa-chevron-down fa-chevron-up');
});         
</script>
</body>
</html>

Answer 1

可能不是最好的解决方案，但这对我有用

if($(this).closest(".ftr_section").find("ul").is(":hidden")){
    $('.footer_sublist').slideUp();                 
}

Answer 2

有很多方法可以实现这一点，我选择放置门 class on 或您为其选择的任何名称。它所做的只是告诉你菜单是否打开

$('.ftr_section .ftr_ttl').click(function () {
    if (!$(this).hasClass('on')) {
        $('.footer_sublist').slideUp();
    }
    $(this).toggleClass('on');
    $(this).closest(".ftr_section").find("ul").slideToggle({
        direction: "up"
    }, 300);
    $(this).closest(".ftr_section").find(".fa-chevron-down, .fa-chevron-up").toggleClass('fa-chevron-down fa-chevron-up');
});

http://jsfiddle.net/88no8eay/2/

单击 parent link 时 slideToggle 不起作用

slideToggle not working when parent link is clicked

jquery

toggle

slidetoggle

slidedown

slideup