Question

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

如果一个面板打开并且我沿着页脚单击另一个链接，则打开的面板将关闭，并且刚刚单击的页脚中的链接会展开。

如果我单击页脚中的链接，面板会向上滑动，但是，如果重新单击页脚中的相同链接以关闭面板，它会向下滑动并再次备份。

有什么想法吗？

这里是代码和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

实现这一目标的方法很多，我选择设置门控类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/

Answer 2

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

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

单击父链接时，slideToggle无法正常工作

2 个答案: