Question

好日子先生。

我有两个div，一个是侧边栏，默认情况下是隐藏的，可以滑动切换。而另一个是某种顶部栏，其中包含一个图标，点击该图标将触发隐藏栏滑动。我可以通过在index.html中执行此操作来实现它：

<div id="top-toolbar">
    <div id="toggler-button"><a href="javascript:void(0)"><img src="img/gear-40px.png" /></a></div>
</div>
<div id="toggled-bar"></div>

<script>
$(document).ready(function(){       
    $("#toggler-button").click(function(){
        $("#toggled-bar").toggle("slide");
    });
});
</script>

我的css看起来像这样：

#top-toolbar {
position: fixed;
width: 100%;
top:0%;
box-shadow: 3px 0px 3px black;
background-color: #FFF;
z-index: 2;
}

#toggler-button {
position: relative;
margin: 5px;
}

#toggled-bar {
position: fixed;
box-shadow: 0px 3px 3px black;
width: 200px;
height: 350px;
top: 50px;
background-color:#FFF;
display: none;
z-index: 1;
}

I put it here，并且它与我的意图有所不同，可以点击整个顶栏以触发滑动。这可能是一个非常的菜鸟问题，但我怎么能调整这个以便只在点击图像而不是整个顶栏时才会发生切换？我想我声明了正确触发切换的功能。

非常感谢任何帮助。

Answer 1

DEMO

更改此

$("#toggler-button")

到

$("#toggler-button img")

<强> JS

$(document).ready(function () {
    $("#toggler-button img").click(function () {
        $("#toggled-bar").toggle("slide");
    });
});

Answer 2

使用$("#toggler-button img")代替$("#toggler-button")，或者为图片提供ID / Class并选择它。通过它。

jsFiddle here.

从不同的div调用JQuery toggle（），而不是指定的

2 个答案: