0

HTML：

<div id="bottomContent" class="bottom_content" > <p>First Content</p> </div>

<div id="bottomContent2" class="bottom_content" > <p>second Content</p> </div>

<div id="bottomContent3" class="bottom_content" > <p>Third Content</p> </div>

JS：

   $("div.one").click (function(){
      $("#bottomContent2").hide();
      $("#bottomContent3").hide();
      $("#bottomContent").animate({width: "toggle"}, 1000);
    });

    $("div.two").click (function(){
       $("#bottomContent").hide();
       $("#bottomContent1").hide();
       $("#bottomContent2").animate({width: "toggle"}, 1000);
    });

    $("div.three").click (function(){
       $("#bottomContent").hide();
       $("#bottomContent2").hide();
       $("#bottomContent3").animate({width: "toggle"}, 1000);
    });

我有以下 jQuery 代码，当单击每个 div 时，它将为其自己的相应 div 项设置动画并关闭可能已经打开的任何其他 div，但我确信有更好的方法对其进行编码并使其更紧凑我已经做好了。任何帮助将不胜感激。

4

1 回答 1

5

data-*我总是通过在被单击的元素上放置一些额外的元数据（使用属性）以关联它的内容来解决这个问题：

<div class="action" data-content="#bottomContent">
  Click me for bottom content
</div>
<div class="action" data-content="#bottomContent1">
  Click me for bottom content 1
</div>
<div class="action" data-content="#bottomContent2">
  Click me for bottom content 2
</div>

请注意，我还为所有三个 div 赋予了相同的类，使我能够将相同的操作与所有三个相关联。

然后jQuery变成：

$("div.action").click (function(){
    var $this = $(this);

    $('div.action').not($this).each(function(){
       var $other = $(this);
       var otherTarget = $other.data('content');
       $(otherTarget).hide();       
    });

    var target = $this.data('content');        
    $(target).animate({width: "toggle"}, 1000);

});

现场示例：http: //jsfiddle.net/rHKML/

于 2012-05-15T10:49:23.100 回答