4

ユーザーがクリックするMoreDiv HiddenDivと表示され、もう一度クリックするか、ページhiddenDivdivの任意の場所をクリックすると非表示にする必要があります

これは私のCSSです

.hiddenDiv {
  margin-left:505px;
  margin-top:25px;
  display:none;
  z-index:9876567890;
  position:absolute;
  width:100px;
  border:1px solid #CCC;
}
.hiddenDiv ul { 
  list-style:none;
  list-style-type:none;
  padding:0;
  margin:0;
}
.hiddenDiv ul li {
  padding:2px;
  cursor:pointer;
} .hiddenDiv ul li:hover {
  background-color:#4681C5;
}

これは私のdivです

<div class="hiddenDiv">
  <ul>
    <li>Add favorites</li>
    <li>Give a Gift</li>
    <li>Block</li>
  </ul>
</div>

これは私のjqueryコードです

$(document).ready(function() { 
  $('div.moreDiv').click(function() {
    $(".hiddenDiv").css('display', 'block');
  });
});
4

6 に答える 6

4

トグルメソッドを使用して、divを表示および非表示にします。

$(document).ready(function() {
    $('div.moreDiv').click(function() {
        $(".hiddenDiv").toggle() });
});​

http://jsfiddle.net/R7VRq/24/

于 2012-05-20T19:08:42.993 に答える
2

showメソッドを使用する

以下のスクリプトは、moreリンクをクリックすると表示され、ウィンドウ内の任意の場所をクリックすると非表示になります。

$(document).ready(function() {
   $(document).click(function() {        
    ShowHide();
   });

   $('div.moreDiv').click(function(e) {
      e.stopPropagation();
      ShowHide(true);
   });
});

function ShowHide(isFirstTime)
{
     var disp= $(".hiddenDiv").css("display");
     if((disp=="none")&&(isFirstTime))
     {                            
         $(".hiddenDiv").show()             
     }
     else
     {
          $(".hiddenDiv").hide()
     }        
}

作業サンプル： http： //jsfiddle.net/R7VRq/31/

于 2012-05-20T19:01:18.040 に答える
1

この場合、JavaScriptで確認できるように、DIVのIDはDIV1です。javascriptを使用するだけで、jqueryは必要ありません。とにかく、これは簡単です。

<div class="moreDiv">More </div><div  id="DIV1" class="hiddenDiv"><ul><li>Add favorites</li><li>Give a Gift</li><li>Block</li></ul></div>

Javascript：

function ShowDIV(){
if (DIV1.style.display=="none") DIV1.style.display="block";
else DIV1.style.display="none";
}

divを非表示または表示するHTML：

<a href="#" onClick="ShowDIV();"><button>Show DIV</button></a>
于 2012-05-20T18:59:20.413 に答える
1

jsBinデモ

  • .toggle()'表示'状態を切り替えるために使用します。
  • イベントリスナーを追加し、を使用します.stopPropagation()。これにより、クリックイベントが要素の祖先に渡される（バブルされる）のを防ぐことができます。
  • ifクリックをチェックするステートメントを追加しbodyます-ポップアップが表示されるかどうかを確認します-trueの場合は非表示にします：

jQ：

  $('div.moreDiv').click(function(e){ // 'e' = event listener
       e.stopPropagation();    // event - stop propagation to body, parents.
       $(".hiddenDiv").toggle();   // toggle 'display' states             
  });
  
  $('body').click(function(){     
      if( $(".hiddenDiv").is(':visible') ){    // check if element is visible
          $(".hiddenDiv").hide();              // if true - hide it
      }
  });

http://api.jquery.com/event.stopPropagation/
http://api.jquery.com/visible-selector/

于 2012-05-20T19:05:11.950 に答える
1 
$(function() { 
    $('div.moreDiv').click(function() {
        if ($(this).hasClass('showing_hidden_div')) {
            $(this).removeClass('showing_hidden_div');
            $('.hiddenDiv').hide();
        } else {
            $(this).addClass('showing_hidden_div');
            $(".hiddenDiv").show();
        }
    });
});

それはそれをする必要があります。

于 2012-05-20T19:06:00.927 に答える
0

要素を非表示にするための.hide（）メソッドがjqueryにあります。bodyonclickを使用してdivを非表示にします。

于 2012-05-20T18:59:37.917 に答える