Question

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

我正在努力使我的'标签'DIV可点击。我在我的部分代码中添加了以下函数并删除了repeditive 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语法，所以我不知道在这一点上去哪里。

谢谢大家。

Answer 1

在您的情况下，不要创建多个切换功能$('#plus1').toggle $('#plus2').toggle而是为他们分配类并创建一个$('.plus').toggle这将最小化并使您的代码高效（可维护）
有关如何使用它的更多信息，请参阅slide toggle example
它给出了如何处理这个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
    });
});

<强> EDITED

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

或者提供样式表

<style type="text/css">
.expandable {
  display: none;
}
</style>

在切换功能中添加单击功能？

1 个答案: