Question

当谈到这部分编程时，仍然是一个菜鸟。我有一个问题，用切换功能重新标记我“解决”的东西。我有3个按钮（放在页面上的不同div中，因此它不是标签切换）。我试图实现的是当我有一个按钮处于活动状态而我点击另一个按钮时，我希望关闭一个按钮。我在这里查看了一些类似的jfiddle帖子，试图将它实现到页面并自己解决，但到目前为止我没有任何工作。我目前用于一个按钮的功能是

<script type="text/javascript">
  $(function() {
    $('#toggle5').click(function() {
        $('.infotext').fadeToggle('fast');
        return false;
    });
  });
</script>

一个按钮可以关闭并打开它，但我不知道从哪里开始，当我需要两个按钮并让它们如前所述相互交互时。有人知道怎么做吗？切换功能甚至是正确的功能吗？我想提前感谢我在这里得到的答案，伟大的社区。

Answer 1

如果关闭你的意思是禁用，那么下面的代码块就可以了。此外，只有当您的按钮是提交或按钮类型时，这才有效。

<script type="text/javascript">
  $(function() {
        // click event for the #toggle5 button
        $('#toggle5').click(function() {
           // check if the #toggle6 is disabled
           if ( !$('#toggle6').is(':disabled')) { 
              // if is not disabled, then disabled it
              $('#toggle6').attr("disabled", "disabled");
           }
           return false;
        });
  });
</script>

如果您的按钮是链接，则需要触发preventDefault事件

文档：http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

<script type="text/javascript">
  $(function() {
        // click event for the #toggle5 button
        $('#toggle5').click(function() {
           $('#toggle6').on("click",function(e){
              // check if we hire the preventDefault event already
              if(!e.isDefaultPrevented()
                 e.preventDefault();
           });
           return false;
        });
  });
</script>

Answer 2

这是一个很好的fiddle。

$("a").click(function(e) {
    var tClass = $(this).attr("id"),
        content = $("div.content." + tClass),
        link = $(this);

    $("div.content:not('." + tClass + "')").fadeOut("fast");
    $("a").not(link).text("Open");
    content.fadeToggle("fast", function() {
        link.hide().text((content.is(":visible") ? "Close" : "Open")).fadeIn("fast");
    });

    e.preventDefault();
});

Answer 3

这将允许多个切换元素。单击切换第一个以打开。单击打开第二个，它将关闭第一个，然后打开第二个。等等等等。也可以通过单击来关闭切换，而无需打开另一个。

HTML标记

<div class="toggle">See Stuff</div>
<div class="paragraph">
  <p>Content</p>
  <p>Content</p>
  <p>Video</p>
  <p>Image</p>
</div>

jQuery

<script>
 $('.paragraph').hide();
 $('.toggle').click(function() {
   var panel = $(this).next()
   $('.paragraph').not(panel).slideUp();
   panel.slideToggle({
    direction: "down"
 }, 1000);
 });
</script>

多次切换。 /隐藏在打开时显示/关闭其他人

3 个答案: