1

我有一个带有可折叠标签和切换 +/- 按钮的手风琴式 NAV 设置。

我正在尝试使我的“标签”DIV 可点击。我在我的部分代码周围添加了以下函数并删除了重复的 toggle() 函数，但它仍然不能正常工作——

更新

$('.tabs').click(function() {
    }
)

我的 HTML

<div id="tab1" class="tabs">NEWS [<a href="#" class="button" id="plus1">more</a>]</div>
<div class="expandable" id="one">
<p>This is placeholder text.</p></div>

<div id="tab2" class="tabs">EVENTS [<a href="#" class="button" id="plus2">more</a>]</div>
<div class="expandable" id="two">
<p>This is placeholder text.</p></div>

还有我的 javascript

$(window).load(function(){
$(document).ready(function(){

$(".expandable").hide();
$(".button").show();

$('.tabs').click(function() {  // added new

  $('.button').toggle(function(){
      $(".expandable").slideDown(
        function(){
          $(".button").text("less")
        }
      );
  },function(){
      $(".expandable").slideUp(
      function(){
          $(".button").text("more")
      }
      );
  });

}); // end of click
});

});

我最初为每个选项卡设置了一个 toggle() 函数，但我被告知不要这样做。我在 JS 语法上苦苦挣扎，所以我现在不知道该去哪里。

谢谢人们。

4

1 回答 1

0

在您的情况下，不要创建多个切换功能，$('#plus1').toggle $('#plus2').toggle而是为它们分配类并创建一个，$('.plus').toggle这将最小化并使您的代码高效（可维护）
有关如何使用它的更多信息请参阅幻灯片切换示例
它提供了一个很好的例子来处理使用此切换功能。你会知道如何使用它。继续吧，如果有任何问题，请发帖:)

更新
为您的 DIV 分配一个需要使其可点击的类（例如tabs）
在您的 JS 中编写此代码 

$(document).ready(function() {
    $('.tabs').click(function() {
      alert('the div is clicked');
      alert($(this).html());  // This is nothing but the content of clicked DIV
    });
});

已编辑

$(document).ready(function() {
  $('.expandable').hide();
});

或者给个样式表

<style type="text/css">
.expandable {
  display: none;
}
</style>
于 2013-02-13T04:18:42.623 回答