Question

我正在尝试弄清楚如何使用类启用onclick进行onclick事件，以进行简单的隐藏显示。是的我看过类似的贴子，但没有一个专门回答我的问题。这是：

如何切换onclick类，例如＆＃39; toggle＆＃39;隐藏和显示基于ID的内容？所以我可以有id =＆＃39; blah＆＃39;类=＆＃39;肘节＆＃39;比使用ID＆＃39; blah＆＃39;？

来切换div

我怎样才能有一个锚链接：

<script>
function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
}
</script>

我使用的是基于使用onclick事件的简单javascript，但我不想使用onclick事件。

<script>
    $(document).ready(function() {
        $('a.toggle').click(function() {
            var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        });
    });
</script>

我尝试使用这样的东西，但它肯定不起作用：

if(state[(j * 4) + c] & 0x80)

不幸的是我理解PHP比我理解javascript好得多..感谢任何和所有的帮助！

Answer 1

首先，它不是您要切换的链接，否则一旦您单击它，它就会消失，您再也无法再点击它。这是应该显示或隐藏的内容区域。

其次，当你可以拨打toggleClass()时，不要将风格设置为与风格相反的风格。

请参阅下面的简单代码：

$(document).ready(function() {
   // Set up a common click event handler for each section's clickable header
   // Note the addition of the callback function's "evt" argument. All event
   // handlers are automatically passed a reference to the event that triggered them.
   $('.sectionHeader').click(function(evt) {
     
     // Just toggle the CSS class that hides the element on the element that comes
     // just after the one that got clicked. Obviously, setting up the HTML structure
     // correctly is what makes this work.
     $(evt.target.nextElementSibling).toggleClass("toggle");
   });
});

section { margin-bottom:1em; height:20vh; }
.toggle { display:none; }
.sectionHeader { font-weight:bold; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <a id="procShowHide1" class="coco button-link sectionHeader" 
     style="cursor: pointer;">Section 1</a>
  <div id="proc1">
                 Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations 
                 Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations                    Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations                    Proclamations Proclamations Proclamations Proclamations
  </div>
</section>
<section>
  <a id="procShowHide2" class="coco button-link sectionHeader" 
     style="cursor: pointer;">Section 2</a>
  <div id="proc2">
                 Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations 
                 Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations                    Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations                    Proclamations Proclamations Proclamations Proclamations
  </div>
</section>
<section>
  <a id="procShowHide3" class="coco button-link sectionHeader" 
     style="cursor: pointer;">Section 3</a>
  <div id="proc3">
                 Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations 
                 Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations                    Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations                    Proclamations Proclamations Proclamations Proclamations
  </div>
</section>

Javascript onclick使用类而不是内联

1 个答案: