Question

我无法搞清楚这一点。我想出了jQuery，我可以使用多个按钮使用css过渡打开相应的div。我不想使用文本，而是使用+和 - 来说明项目是打开和关闭的。

我希望+更改为 - 当您点击其他+项目时。我还希望当前项目上的+为toggleClass或从+更改为 - 并返回+

我希望拥有更多JS技能的新眼睛可以让我直截了当。

所以这是我的代码......

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<style> 

.btn {display:inline-block; text-decoration:none; width:20px; margin:1%; padding:.3em .8em; border-radius:20px; color:#fff; text-align:center; background-color:#FFB50B;}

.btn:hover {cursor:pointer; opacity:.7; color:#000;}

.btn-pnl:before {content:"+"; font-weight:600px;}

.btn-pnl-viz:before {content:"-";}

.hidden {visibility:hidden;}

.panels-wrap {width:870px; height:auto; margin:0 auto; padding:0;}

.panel {width:98%; height:0px; float:left; margin:0 1%; padding:0; opacity:0; visibility:hidden; background:#f60; color:rgba(0,0,0,0);

-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease;
transition: all .3s ease;

}

.panel-trn {width:100%; height:100px; visibility:visible; opacity:1; color:rgba(0,0,0,1); background:#0F0}

</style>
</head>
<body>

<script>
$(document).ready(function() {

$("a[data-toggle]").on("click", function(e) {
e.preventDefault();  // prevent navigating
var selector = $(this).data("toggle");  // get corresponding selector from data-toggle
$(selector).toggleClass('panel-trn').siblings().removeClass("panel-trn");           
});

$('a').click(function() {
$("a").removeClass("btn-pnl-viz");

//Tried this and no luck > $(this).toggleClass('btn-pnl-viz');

if ($(this).hasClass("btn-pnl-viz")){
$(this).removeClass("btn-pnl-viz");
}else{
$(this).toggleClass("btn-pnl-viz");
};         
}); 
});


</script>

<div>
<div>
<a href="#" data-toggle="#div1" class="btn btn-pnl"></a>
</div>
<div>
<a href="#" data-toggle="#div2" class="btn btn-pnl"></a>
</div>
<div>
<a href="#" data-toggle="#div3" class="btn btn-pnl"></a>
</div>

<div id="div1" class="panel">div 1</div>
<div id="div2" class="panel">div 2</div>
<div id="div3" class="panel">div 3</div>

</div>

<div>
<a href="#" data-toggle="#div4" class="btn btn-pnl"></a>
</div>
<div>
<a href="#" data-toggle="#div5" class="btn btn-pnl"></a>
</div>
<div>
<a href="#" data-toggle="#div6" class="btn btn-pnl"></a>
</div>

<div id="div4" class="panel">div 1</div>
<div id="div5" class="panel">div 2</div>
<div id="div6" class="panel">div 3</div>

我可以让一切工作，除了我无法按下切换+和 - 如果我点击两次相同的按钮。当点击容器div的另一个按钮时，我也无法让现有的活动关闭。

Total Newb问题我知道，但是，如果有人可以提供帮助，我将非常感谢... ...就此花费了很多时间！

谢谢！

Answer 1

替换$（＆＃34; a＆＃34;）的代码。click（）;

跟随我测试其工作正常

$('a').click(function() {


    ($("a").not($(this))).removeClass("btn-pnl-viz");
    $(this).toggleClass("btn-pnl-viz");

});

如果代码有任何问题，请回复感谢

jQuery问题与$（this）.toggleClass和多个btns和元素

1 个答案: