單擊以顯示和隱藏菜單

Question

為什么我可以單擊此代碼中的“項目信息”來顯示文本，但不能再次單擊以隱藏文本。 我對javascript有經驗，並且弄亂了代碼...任何幫助將不勝感激。 這是html代碼：

<div  class:"descinner;" style="position:fixed; left:260px; top:595px;">
  <a href="javascript:void(0);" class="showDesc" style="display: inline; ">Project info</a>
  <div style="width: 500px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color:#fff; opacity: 0.9; position: fixed; margin-top: 10px; margin-left: 100px;  font-size: 14px; font-weight:bold; line-height: 125%; display: none; background-position: fixed; ">
    Exces eturio. Ipis eos autatus ad quia cum santo doluptio que dignatenis dipsam non cuptam, tectaer iosaperiam repudi imo quaerum resciet acercianis apedipsam dellendae nobis am raectotatur, cum expla enit placcup tasitium quias qui quia illaceribus quiates dolecte occusandit anduntibus doluptat.               
  </div>
</div>      

這是腳本：

<script type="text/javascript">
  var descShow = false;
  $('.showDesc').click(function(){
    $(this).hide();
    $(this).next().show();
    $('.descInner').css();                      
    descShow = true;
  });

  var ee;
  $('body').click(function(e){
    e = window.event || e; 
    ee = e;

    var node = e.srcElement || e.target;
    var $node = $(node);

    if(node=='javascript:void(0);'){
      return;
    }

    while ($node.html()!=null){
      if($node.hasClass('descInner')){
        $('.showDesc').next().hide();
        $('.showDesc').show();
        $('.descInner').css();
        descShow = false;
        return;
      }
      $node = $node.parent();
    };
});
</script>

Answer 1

如果您要做的只是在單擊鏈接時顯示文本，然后在單擊正文時將其隱藏，請使用類似的方法。 可在此處找到工作示例： http : //jsfiddle.net/vb9NU/

$('.showDesc').click(function(e) {
    e.stopPropagation(); 
    $(this).hide().next().show(); // hides the link, shows the next div
    // $('.cssclass').show(); // if you want to make the div a css class, bit easier incase you change your markup (INSTEAD of .next().show() above)
});

$('body').click(function() { 
    $('.showDesc').show().next().hide(); // (if you make the div to show/hide based on a selector instead of next(), do a similar sort of thing as above
});

e.stopPropagation（）停止單擊瀏覽器的“冒泡”鏈接，同時認為它也是單擊主體（這將導致它立即顯示然后隱藏）。

如果我不明白您的要求，我深表歉意。 僅供參考， $node是div元素，而不是字符串。

嘗試使用console.log(whateveryouwanttolog)例如console.log($node)來查看控制台中的變量值（在Firebug中或在chrome / safari開發人員工具中）。 它使事情變得容易得多：）