0

当涉及到这部分编程时，仍然是一个菜鸟。我有一个关于我用切换功能“解决”的问题的问题。我有 3 个按钮（放置在页面上的不同 div 中，所以它不是选项卡切换）。我试图实现的是，当我有一个按钮处于活动状态并单击另一个按钮时，我希望关闭活动按钮。我在这里查找了一些类似的 jfiddle 帖子，尝试将其实现到页面并自己弄清楚，但到目前为止对我没有任何帮助。我目前用于一个按钮的功能是

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

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

4

3 回答 3

0

如果关闭意味着禁用，那么下面的代码块就可以解决问题。此外，这仅在您的按钮是提交或按钮类型时才有效。

<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>
于 2012-10-19T11:50:13.690 回答
0

这是一个很好的小提琴。

$("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();
});​
于 2012-10-19T12:08:33.627 回答
0

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

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>
于 2018-03-18T00:46:35.360 回答