Question

今天一直在学习jQuery，并设法让自己成为这个幻灯片菜单，我只是想知道是否有办法让代码更简化？

似乎没有在jsfiddle中工作？但当你点击我，项目等时，下面会出现一个方框..

这可以缩短css或jquery代码（或两者），比如对每个不同的框使用相同的类就好了......

$( document ).ready(function() {
 $("#box1").click(function() {
    $('.dropbox').slideToggle("slow");
 });
  $("#box2").click(function() {
    $('.dropbox2').slideToggle("slow");
    });
    $("#box3").click(function() {
    $('.dropbox3').slideToggle("slow");
 });
});

Answer 1

您可以将ids变为公共类名，并只附加一个处理程序。

HTML：

<div class="box">
    <p>About me</p>
</div>
<div class="dropbox">
    <p>a wild potato appeared</p>
</div>
<div class="box">Projects</div>
<div class="dropbox">
    <p>ja</p>
</div>
<div class="box">Websites</div>
<div class="dropbox">
    <p>hey</p>
</div>

JS：

$(document).ready(function () {
    $(".box").click(function () {
        $(this).next('.dropbox').slideToggle("slow");
    });
});

CSS：

* {
    margin: 0 auto;
}
.box:first-child{
     margin-top: 20px;
}
.box {
    background-color: red;
    max-width: 470px;
    padding: 10px;
}
.box:hover {
    background-color: yellow;
}

.dropbox {
    max-width: 470px;
    padding: 10px;
    background-color: black;
    display: none;
    color: white;
}

<强> Demo

顺便说一句，你需要从左侧面板“Frameworks＆amp; Extensions”中选择jquery。

如果您想在切换当前保管箱时向其他人滑动，您可以这样做：

$(document).ready(function () {
    var $dropBoxes = $('.dropbox');
    $(".box").click(function () {
        $dropBoxes.not($(this).next('.dropbox').slideToggle("slow")).slideUp('slow');
    });
});

jQuery幻灯片菜单新手

1 个答案: