1

先生们好日子。

我有两个 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;
}

我把它放在这里，不知何故它的工作方式与我的意图不同，可以点击整个顶部栏来触发滑动。这可能是一个非常菜鸟的问题，但是我如何调整它以便仅在单击图像时才发生切换，而不是整个顶部栏？我想我声明了正确触发切换的函数。

任何帮助深表感谢。

4

2 回答 2

2

演示

改变这个

$("#toggler-button")

到

$("#toggler-button img")

js

$(document).ready(function () {
    $("#toggler-button img").click(function () {
        $("#toggled-bar").toggle("slide");
    });
});
于 2013-08-19T13:58:37.777 回答
1

使用$("#toggler-button img")代替$("#toggler-button")，或给图像一个 ID/Class 并通过它选择它。

jsFiddle在这里。

于 2013-08-19T13:57:32.403 回答