如何展開和折疊響應式移動菜單

Question

我創建了一個響應式菜單，剩下的就是使其切換。 我不確定在按下單詞菜單時如何顯示菜單。 默認情況下，菜單是折疊的，然后在按下菜單按鈕時會展開，而在再次按下該按鈕時則會折疊。

有人可以幫助我，因為我是新來的，對此不確定。 我已將項目上傳到jsfiddle。 link http://jsfiddle.net/bLbdavqu/2/ HTML：

<div id="nav"><!--nav-->
    <div id="pull">
        <a href="#" id="pull">Menu</a>  
    </div>
    <ul>
        <li><a href="#.html">Home</a></li>
        <li class="active"><a href="#.html">About Gnosis</a>
            <ul>
                <li><a href="#.html">What is Gnosis</a></li>
                <li><a href="#.html">Origins of Gnosis</a></li>
                <li><a href="#.html">Foundations</a></li>
            </ul>      
        </li>
        <li><a href="#.html">Articles</a></li>
        <li><a href="#.html">FAQ</a></li>
        <li><a href="#.html">Courses</a></li>
        <li><a href="#.html">Centres</a></li>
        <li><a href="#.html">International</a></li>
   </ul>
</div><!--/nav-->

CSS：

 body {
     background:brown;
 }

#pull {
    display:none;
    float:left;
    height:auto;
    width:100%;
}

#pull img {
    float:right;
}


#nav{
    float:left;
    height:155px;
    width:63%; 
    background:url(../images/top-banner.png) no-repeat;
    background-position:bottom;
    background-size:100%;
    position:relative;
}

#nav ul {
    height:auto;
    width:100%;
    list-style-type:none;
    position:absolute;
    bottom:0;
    *zoom:1;
}

#nav ul li {
    float:left;
    padding-left:20px;
    position:relative;
}

#nav ul li a {
    font-family:Trajan-Pro;
    font-size:0.9em;
    color:#fff;
    text-decoration:none;
}

#nav ul li a:hover {
    color:#d2aa76;
    border-bottom:2px solid #d2aa76;
    padding-bottom:5px;
}

#nav ul li:hover > a {
    color:#d2aa76;
    border-bottom:2px solid #d2aa76;
    padding-bottom:5px;
}


/*1st level sub-menu */
#nav ul ul {
    display:none;
}

    #nav ul li:hover > ul {
        height:auto;
        width:180px;
        display:block;
    }

    #nav ul ul li:hover > a {
    color:#d2aa76;
    border-bottom:none;
}

#nav ul ul {
    padding:0;
    position:absolute;
    top:100%;
    padding-top:15px;
}

    #nav ul ul li {
        float:none;
        position:relative;
        padding:7px 0px;
        border-top:1px solid #000;

        background: #423d33;
        background: linear-gradient(top, #423d33 0%, #4a4843 40%);
        background: -moz-linear-gradient(top, #423d33 0%, #4a4843 40%);
        background: -webkit-linear-gradient(top, #423d33 0%,#4a4843 40%);

        -webkit-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
        -moz-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
        box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);

        transition: all 300ms cubic-bezier(0.175,0.885,0.32,1.275) 0;

    }
        #nav ul ul li a {
            font-size:0.8em;
            padding-left:15px;
        }

        #nav ul ul li a:hover {
            border-bottom:none;

        }

@media screen and (max-width: 1900px) {
    #logo {
        height:95px;
        width:100%;
        background:none;
    }

    #logo h1 {
        top:0;
        margin:0;
        padding-top:10px;
    }

    #header-container {
        height:auto;
    }

    #pull {
        display:block;
    }

    #nav {
        height:100%;
        width:100%;
        background:none;
        margin:0;
        padding:0;
        clear:both;
    }

    #nav ul {
        height:100%;
        position:static;
        margin:0;
        padding:0;
        display:block;
    }

     #nav ul > li {
        float: none;
    }

    #nav ul li {
        padding-left:0px;
    }

    #nav ul li a {
        display:block;
        padding: 9px 9px;
        position: relative;
        z-index:100;
    }

    #nav ul ul {
        position:relative;
         top:0;
         bottom:0;
         margin:0;
         padding:0;

    }
            #nav ul li:hover > ul {
            height:auto;
            width:100%;

        }

    #nav ul ul li   {
        border-top:none;
        background: #615f5b;
        -webkit-box-shadow:none;
        -moz-box-shadow:none;
        box-shadow:none;
    }

    #nav ul ul li a {
        display: block;
        padding-left:30px;
        position: relative;
        z-index: 100;
    }

   #nav ul > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
 }

Answer 1

您可以使用javascript更改屬性：我做了一個jsfiddle： http : //jsfiddle.net/bLbdavqu/3/

function show(){
    var show = document.getElementById('the_menu');
    show.setAttribute('style','display:inline');
}

您可以將其包裝在div中以使其更容易，然后將顯示從無更改為嵌入式。 問題：您是否想讓用戶更改以再次單擊菜單時隱藏菜單？ 或者，如果您准備使用jquery，只需使用toggle：

$(document).ready(function(){
$('button').click(function () {    
$("#toggle").toggle();
});});

http://jsfiddle.net/bLbdavqu/5/

Answer 2

    <div id="nav"><!--nav-->
        <div id="pull">
            <a href="#" id="pulls" onclick="show(1)">Menu</a>  
        </div><br/><br/>
        <div id="the_menu">
         <ul>
            <li><a href="#.html">Home</a></li>
            <li class="active"><a href="#.html">About Gnosis</a>
                <ul>
                    <li><a href="#.html">What is Gnosis</a></li>
                    <li><a href="#.html">Origins of Gnosis</a></li>
                    <li><a href="#.html">Foundations</a></li>
                </ul>      
            </li>
            <li><a href="#.html">Articles</a></li>
            <li><a href="#.html">FAQ</a></li>
            <li><a href="#.html">Courses</a></li>
            <li><a href="#.html">Centres</a></li>
            <li><a href="#.html">International</a></li>
        </ul>
        </div><!--/nav-->
    </div>

腳本

    <script>
    function show(ValueToggle){
        if(ValueToggle==1){
          $('#the_menu').show();
          $('#pulls').attr('onClick','show(0)');
        } else {
          $('#the_menu').hide();
          $('#pulls').attr('onClick','show(1)');
        }
    }
    </script>

Answer 3

您可以使用JQuery切換菜單http://jsfiddle.net/bLbdavqu/8/

只需更改ul的CSS。

隱藏列表- $( "#mylist" ).css("display","none");

顯示列表- $( "#mylist" ).css("display","block");

Answer 4

我認為您想在鏈接“菜單”的單擊上顯示菜單項（“首頁”，“關於Gnosis”等），然后在鏈接“菜單”的單擊處再次隱藏這些項目。 我為您制作了一個jsfiddle http://jsfiddle.net/Tushar490/kL1dgvmr/6/

<div id="nav"><!--nav-->
<div id="pull">
    <a href="#" id="pull">Menu</a>  
</div>
    <div id="bs-example-navbar-collapse-2">
<ul>
    <li><a href="#.html">Home</a></li>
    <li class="active"><a href="#.html">About Gnosis</a>
        <ul>
            <li><a href="#.html">What is Gnosis</a></li>
            <li><a href="#.html">Origins of Gnosis</a></li>
            <li><a href="#.html">Foundations</a></li>
        </ul>      
    </li>
    <li><a href="#.html">Articles</a></li>
    <li><a href="#.html">FAQ</a></li>
    <li><a href="#.html">Courses</a></li>
    <li><a href="#.html">Centres</a></li>
    <li><a href="#.html">International</a></li>
</ul>
</div>
</div><!--/nav-->

劇本：-

$(document).ready(function () {   
$("#pull").on('click',function () {
$("#bs-example-navbar-collapse-2").toggle();
});   
});

在CSS中，您只需要刪除“ float：left;”。 來自“ #pull”。

希望這對您有幫助！

Answer 5

這是解決方案，請參見以下代碼

$(document).ready(function(){
$('#test').hide();$('#pull').click(function () {$("#test").toggle();});});

http://jsfiddle.net/bLbdavqu/12/

您需求的更新。