Question

我已经基于可扩展和可关闭的div创建了一个导航，autoclose和open works但是总是有一个占用空间的无形div。同样，当重新点击菜单项时应该关闭div。尝试了不同的关闭方法，但它不会让我。

这是我到目前为止所得到的：

HTML

<div class="secondtopdiv">
<div class="containerdiv">
<div id="nav">
    <a href="#target1" class="panel">Target 1</a>
    <a href="#target2" class="panel">Target 2</a>
    <a href="#target3" class="panel">Target 3</a>
</div></div>
<div id="navcontent">
    <div class="panel" id="target1">Target 1</div>
    <div class="panel" id="target2">Target 2</div>
    <div class="panel" id="target3">Target 3</div>
</div>
</div>

^^^^^^^^^^UNWANTED SPACE FROM DIV NAVCONTENT, MUST PUSH MAIN CONENT DOWN INSTEAD OF ALWAYS BEING THERE
<div class="spacerdiv"></div>
<div class="containerdiv">
<div class="maindiv">
<div class="divtitle">
Title
</div>
<center>Some div in main page</center>
</div>

CSS

.containerdiv
{
    min-width:400px;
    max-width:500px;
    overflow:hidden;
    display:block;
    margin-left:auto;
    margin-right: auto;
}

.secondtopdiv
{
    width: 100%;
    height: 100px;
    background: #61c5bb;
    color:#000000;
    vertical-align: middle;
    line-height: 100px;
}

#nav{
    width: 100%;
    overflow: hidden;
}

#navcontent {
    position: relative;
    float: left;
    width: 100%;
    min-height: 100px;
    overflow: hidden;
}

.spacerdiv
{
    height:20px;
}

.divtitle {
    font-size: 18px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    line-height: 50px;
}

div.panel {
    position: absolute;
    background: #61c5bb;
    height: 100%;
    width: 100%;
    display: none;
}

的Jquery / JS：

jQuery(function($) {

    $('a.panel').click(function() {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active'),
            animIn = function () {
                $target.addClass('active').show().css({
                    top: -($target.height())
                }).animate({
                    top: 0
                }, 500);
            };

        if (!$target.hasClass('active') && $other.length > 0) {
            $other.each(function(index, self) {
                var $this = $(this);
                $this.removeClass('active').animate({
                    top: -$this.height()
                }, 500, animIn);
            });
        } else if (!$target.hasClass('active')) {
            animIn();
        }
    });

});

链接到小提琴：http://jsfiddle.net/6swdzycc/10/

Answer 1

如果我理解正确，您可以从min-width删除#navcontent，并可以使用以下脚本：

jQuery(function ($) {

  $('a.panel').click(function () {
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active');
    if ($other.length) $other.removeClass("active").slideUp("slow", function () {
        $target.toggleClass("active").slideToggle("slow");
    })
    else $target.toggleClass("active").slideToggle("slow");
  });
});

JSFiddle

Answer 2

div.panel1 {
    background: #61c5bb;
    height: 150px;
    width: 100%;
    display: none;
}

    <div class="containerdiv">
        <div id="nav">
            <a href="#target1" class="panel">Target 1</a>
            <a href="#target2" class="panel">Target 2</a>
            <a href="#target3" class="panel">Target 3</a>
        </div>
    </div>
    <div id="navcontent">
        <div class="panel1" id="target1">Target 11111</div>
        <div class="panel1" id="target2">Target 21111</div>
        <div class="panel1" id="target3">Target 31111</div>
    </div>

    <script>
    $('document').ready(function(){
        $('.panel').click(function(){
            var thisHref=$(this).attr('href');
            $('.panel1').hide();
            $(thisHref).slideToggle('slow');
        });
    });
    </script>

可扩展/可折叠div，不会关闭并具有不必要的空间

2 个答案: