我目前的解决方案看起来基本上是这样的:
HTML:
<div class="bar top-bar">
<div class="barline">
<a href="#" id="item1">Link 1</a>
<a href="#" id="item2" class="btn dropdown">Link 2</a>
<a href="#" id="item3">Link 3</a>
<a href="#" id="item4">Link 4</a>
<a href="#" id="item5">Link 5</a>
<a href="#" id="item6">Link 6</a>
<a href="#" id="item7">Link 7</a>
</div>
</div>
JQuery的:
var $default = $('#item2').clone(true);
var $shared = $('#item3').clone(true);
var $standard = $('#item4').clone(true);
var div = '<div class=\'dropdown-menu\'><span class=\'dropdown-box\'></span></div>';
$('.barline a#item2').remove();
$('.barline a#item3').remove();
$('.barline a#item4').remove();
$('.barline').find('a:nth-child(1)').after(div);
$('.dropdown-menu').prepend($default);
$('.dropdown-box').append($shared);
$('.dropdown-box').append($standard);
$(".barline").on("click", "#item2", function() {
$(this).next('.dropdown-box').toggleClass('show');
});
以下是我的代码: jsfiddle
点击事件无效。
答案 0 :(得分:0)
你的div-html中没有类'barline'。或者我们需要更多代码来回答这个问题。
<强>更新强> 实际你的JS切换类,但这个类没有效果。 你的css缺少一个“.show”类,它将dropbox设置为display:例如block。