jquery - 重构 navBar jQuery 代码

Question

所以我已经让我的 navBar 正常工作了，但是我的代码中有很多 if 语句……基本上每个 navBar 选项有 1 个 if。我希望你们能帮我一点忙，让所有这些 if 语句成为一个简单的命令。我知道可以做到，但遇到了一些麻烦......

我这样做的主要原因是，如果我想将元素添加到我的 navBar，我不必返回 jQuery 代码来添加更多的 if 语句。

如果您不想阅读这里的所有代码，可以使用 Fiddle

HTML 布局

导航栏中的某些选项没有子菜单，而其他选项则有。

<ul id="posiNav">
   <li>
       <a href="#">Home</a>
   <li>
   <li>
       <a href="#">Overview</a>
   <li>
   <li>
       <a class="dropable"><img class="arrow" id="option1Arrow" src=".."/>Option 1</a>
       <ul class="navDrop" id="option1Drop">
            <li><a href="#">sub-menu</a></li>
       </ul>
   <li>
   <li>
       <a class="dropable"><img class="arrow" id="option2Arrow" src=".."/>Option 2</a>
       <ul class="navDrop" id="option2Drop">
            <li><a href="#">sub-menu</a></li>
       </ul>
   <li>
</ul>

jQuery

$('.dropable').click(function () {
    //The first part of this code doesn't need to be changed, it's strictly to rotate the arrow
    var child = $(this).children();
    var id = child.attr("id");
    var currAngle = child.getRotateAngle();

    if(currAngle == -180){
        child.rotate({
            duration:500,
            angle:-180,
            animateTo:0
        });
    }
    else{
        child.rotate({
            duration: 500,
            angle:0,
            animateTo:-180
        });
    }

    //This is what I would like to abridge
    if (id == 'option1Arrow') {
        $('#option1Drop').slideToggle("slow");
    }
    if (id == 'option2Arrow') {
        $('#option2Drop').slideToggle("slow");
    }
});

我也有 jQuery 代码来检查你在哪个页面，如果是那个页面，如果有一个，它会下拉子菜单......

$(function() {
    if ( document.location.href.indexOf('option1') > -1 ) {
        $('#option1Drop').slideToggle("slow");
        $('#option1Arrow').rotate({
            duration: 500,
            angle: 0,
            animateTo:-180
        });
    }
    if ( document.location.href.indexOf('option2') > -1 ) {
        $('#option2Drop').slideToggle("slow");
        $('#option2Arrow').rotate({
            duration: 500,
            angle: 0,
            animateTo:-180
        });
    }
});

CSS-- 关于折射不是很重要，但为了你们这里的完整性和整洁，它是:

#posiNav {
    list-style-type: none;
    background-color: rgb(179, 35, 23);
    color: white;
    width: 150px;
    text-align: center;
    margin: 10px 0px
}

#posiNav a {
    display: block;
    position: relative;
    padding: 3px 0px;
    color: inherit;
}

#posiNav li {
    padding: 3px 0px;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(204,204,204);
}

#posiNav li:hover {
    background-color: gray;
}

.navDrop {
    background: rgb(221, 220, 220);
    border-style: none;
    color: black;
    list-style-type: none;
    margin-left: 10px;
}
.arrow {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 15px;
    cursor: pointer;
}

Answer 1

也许这可以帮助你:

Decalre 一个变量，它保存正在滑动的目标 ul 的 id。

var tgt = $(this).siblings('ul')[0].id;

那么你可以这样做

if(currAngle == -180){
    child.rotate({
        duration:500,
        angle:-180,
        animateTo:0
    });
    $('#'+tgt).slideToggle("slow");  //<-----here
}else{
    child.rotate({
        duration: 500,
        angle:0,
        animateTo:-180
    });
    $('#'+tgt).slideToggle("slow"); //<---and here
}

Fiddle to try

评论中的另一种方式:

因为您已经有了 <ul> 的类名它正在滑出，然后您可以更改为这个以减少后顾之忧:

添加这个变量:

 var tgt = $(this).siblings('ul');

并添加这个:

tgt.slideToggle("slow");

Another fiddle