Question

尝试制作响应式菜单。但菜单没有打开。感谢您的帮助。

<navi>    
         <div class="gizli"><i class="fa fa-bars" style="color:#FFFFFF; border:1px solid #FFFFFF;height:60px;padding :20px;"></i> 
          <div class="clear"></div>
            <ul>
                <li><a href="index.html">Ana Menü<br /> <small>Ana Menü</small></a></li>
                <li><a href="hakkinda.html">Hakkında<br /> <small>Hakkımızda</small></a></li>
                <li><a href="proje.html">Projeler<br /> <small>Meet Our Friends</small></a></li>
                <li><a href="hizmet.html">Hizmetlerimiz<br /> <small>See Our Work</small></a></li>
                <li><a href="urunler.html">Ürünler<br /> <small>Hear Us</small></a></li>
                <li><a href="teknik.html">Teknik Bilgi<br /> <small>Steal Our Stuff</small></a></li>
                <li><a href="teklif.html">Teklif<br /> <small>Read About Us</small></a></li>
                <li><a href="iletisim.html">İletişim<br /> <small>Email Us</small></a></li>
            </ul>
        </div>
    </navi>

javascrip code

 $(document).ready(function() {
$(".gizli").click(function(){
    $(this).next("ul").slideToggle();
});

}）;

css代码。我的工作没有原因。我的css文件在下面

    /**
 * Design Shack Respnsive Menu
 */

/* navgasyon Menü */
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
navi {  right:15%;  margin: 0 auto; overflow: hidden;}

navi ul {list-style:none;overflow:hidden;padding-right:4%;padding-left:4%;}

navi .clear{clear:both;}
navi li a {
    background: #444;
    border-right: 1px solid #fff;
    color: #fff;
    display: block;
    float: left;
    font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    padding: 25px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 12.5%;
    height:80px;

    /*TRANSISTIONS*/
    -webkit-transition: background 0.5s ease;
       -moz-transition: background 0.5s ease;
         -o-transition: background 0.5s ease;
        -ms-transition: background 0.5s ease;
            transition: background 0.5s ease;
}

/*HOVER*/
navi li a:hover {
    background: #222;
}

/*SMALL*/
navi small {
    font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
    text-transform: none;
    color: #aaa;
}

/*BORDER FIX*/
navi li:last-child a {
    border: none;
}

/*BLUE MENU*/
navi .blue {
    margin-top: 50px;
}

.blue li a {
    background: #75b1de;
}
/*gizli menü */
navi .gizli{
    height:0;

}
navi .gizli a{  
    padding-left:0;
}


.blue small {
    color: white;
}

.blue li a:hover {
    background: #444;
}

/*RED MENU*/

navi .red {
    margin-top: 50px;
}

.red li a {
    background: #5C0002;
}

.red small {
    color: white;
}

.red li a:hover {
    background: #a60306;
}

/* MEDIA QUERIES*/
@media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px){
    navi li a {
        font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    }

    navi small {
        font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
    }

}

@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){

    navi li a {
        width: 25%;
        border-bottom: 1px solid #fff;
        font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    }

    navi li:last-child a, nav li:nth-child(4) a {
        border-right: none;
    }

    navi li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
        border-bottom: none;
    }
}

@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
    navi .gizli{
        display:inline;
        color:#000000;
        height:60px;
    }

    navi .gizli i{
        padding-left:10px;
        font-size:16px;
        border:1 solid #FFFFFF;
        background-color:#000000;
        width:100%;     
    }navi .gizli i:hover{
        cursor:pointer; 
    }

    navi small {
        display:none;
    }

    navi ul {
        height:40px;
        padding-top:0;
        padding-right:0;
        padding-left:0;
        color:#000000;
        display:none;
    }
    navi li a {
        font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
        display:none;
        width:100%;
        padding:25px;
        height:40px;    
        color:#000000;  
    }

    navi li:nth-child(even) a {
        border-right: none;
    }

    navi li:nth-child(5) a, nav li:nth-child(6) a {
        border-bottom: 1px solid #fff;
    }
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    navi li a {
        font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    }
}

我的文件中出现的问题应该是根据以下CSS文件。问题是580px。如果你帮助我，我会很高兴的。

Answer 1

尝试这个来激活ul列表上的滑动（找到而不是下一个方法）

$(this).find("ul").slideToggle();

如果div块只有一个ul，它就可以工作。你的代码不起作用，因为在带有类gizli的div之后，ul之前还有另外两个组件。

Answer 2

这是你在小提琴中的答案

$(this).find('ul').slideToggle();

https://jsfiddle.net/sesn/50z91mpb/

css响应式菜单点击

2 个答案: