Question

好吧，我需要一些帮助，因为我很容易陷入困境。我正在尝试制作一个简单的下拉式菜单，它将用于不同的目的，然后导航菜单。但无论如何，我可以让它完美地工作，我只需要一些简单的代码帮助。这是html：

<div class="big">
    <a href="#" id="atog1">Hello</a>
    <a href="#" id="atog2">Hello</a>
    <a href="#" >Hello</a>
    <a href="#">Hello</a>
<br clear="all">
    <div id="drop" class="atog1">This is a toggled div1!</div>
    <div id="drop" class="atog2">This is a toggled div2!</div>
</div>

这是Jquery初始代码可以很好地工作，但我需要最多20个不同的a和div来显示，我不想要所有的代码。所以我试着把它放在一个干净简单的简短代码片段中：

//Make the toggled div
$('#atog1').show();
$('div.atog1').hide();
$('#atog1').click(function(){
    $('div.atog2').hide();
    $('div.atog1').slideToggle();
});
//Make the toggled div2
$('div.atog2').hide();
$('#atog2').click(function(){
    $('div.atog1').hide();
    $('div.atog2').slideToggle();   
});

这里是我卡住的地方，这应该是上面的更短版本，但当我点击第一个a它打开div时，当我点击第二个a它隐藏第一个div然后然后如果我再次点击第一个a它不会隐藏div：

$('div[class^=atog]').hide();

$('a').click(function(){
    var tid = $(this).attr('id');
    $('div#drop[class!='+tid+']').hide();
    $('div#drop[class='+tid+']').slideToggle();
});

我知道应该有一个非常简单的解决方案，但我可能看不到它。感谢任何人提前，这是我的jsfiddle，如果这更有帮助！ http://jsfiddle.net/liveandream/stGF9/

Answer 1

您不能拥有相同id的多个元素。

您应该在需要共享时使用类。以下是如何更改它的一个示例。

http://jsfiddle.net/stGF9/54/

$('div.drop').hide();

$('a').click(function(){
    var tid = $(this).attr('id');
    var el = $('div.drop.'+tid);

    $('div.drop').not(el).hide();
    el.slideToggle();
});

在jquery中简化点击和切换功能

1 个答案: