2

基本的に、ユーザーがリンクをクリックするとdivが表示されるコードがあります。ユーザーは、同じリンクをクリックしてこのdivを非表示にする必要があります。私は8つのdivを持っています。開いたときと同じリンクをクリックするのではなく、div内の別のリンクをクリックして閉じることができるように設定するにはどうすればよいですか？私のコードは以下の通りです。

http://www.lovehatecreate.net/iqhomes/jquery-show-hide-plugin-2/index.php

構文エラーを示す行は無視してください。コードは引き続き機能します。ページにある質問に関係のないファイルをアップロードするのを忘れました。

ありがとうございました！

4

3 に答える 3

3

これはあなたのユースケースをカバーしていますか?

抜粋：

$('.show').click(function () {
    var divId = $(this).data('divId');
    $('#' + divId).toggle();
});

$('.hide').click(function () {
    $(this).parent().hide();
});
于 2012-09-11T01:49:28.437 に答える
0

ここで、コードビンの完全なビンを作成しました。デモ リンクを一度確認してください。

デモ: http://codebins.com/bin/4ldqp7c

HTML

<div id="links">
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
</div>
<div id="boxes">
  <div class="box">
    <p>
      Here is Content..!! 
    </p>
    <p>
      <a class="closelink" href="javascript:void(0);">
        Close
      </a>
    </p>
  </div>
</div>

jQuery

$(function() {
    var boxClone;

    $(".openlink").click(function() {
        //Clone Dialogbox
        boxClone = $("#boxes").find(".box:eq(0)").clone(true, true);
        var boxOffset = $("#boxes").find(".box:last").position();
        //Set Dialog Position
        if (boxOffset.top == 0) {
            boxOffset.top = 5;
        }
        if (boxOffset.left == 0) {
            boxOffset.left = 60;
        }
        $(boxClone).css('top', (boxOffset.top + 20));
        $(boxClone).css('left', (boxOffset.left + 20));
        $(boxClone).appendTo($("#boxes"));
        $(boxClone).show(500);
    });

    //Close Dialogbox
    $(".closelink").click(function() {
        $(this).closest(".box").remove();
    });

});

CSS

#links{
  float:left;
  width:50px;
  border:1px solid #92a3a7;
  padding:1px;
  background:#88ddfa;
}
#links a{
  dispslay:block;
  text-decoration:none;
  color:#3543ff;
}
#links a:hover{
  text-decoration:underline;
  color:#fd2211;
}
#boxes{
  float:left;
  margin-left:10px;
}
#boxes p{
  text-align:center;
  display:block;
  color:#ccc;
}
#boxes a.closelink{
  text-decoration:none;
  color:#ff2211;
  background:#99cd9a;
  width:40px;
  text-align:center;
  padding:3px;
  font-size:14px;
}
#boxes a.closelink:hover{
  text-decoration:underline;
  background:#a5d9a3;
  color:#2222ff;
}

.box{
  position:absolute;
  width:200px;
  height:200px;
  vertical-align:top;
  border:10px solid #888;
  background:url('http://www.lovehatecreate.net/iqhomes/jquery-show-hide-plugin-2/popupbg.png') #333;
  display:none;

}

デモ: http://codebins.com/bin/4ldqp7c

于 2012-09-11T11:04:48.710 に答える
0

グループ化することを示すすべての<div>sa クラスを指定し (一度に 1 つだけ開く)、リンクをクリックすると、クリックしたリンクの要素を表示する前に、そのクラスを持つすべての要素を非表示にします。
これをトグルと組み合わせたい場合は、それらをすべて非表示にする前にトグル状態を取得してください。したがって、開いている場合は閉じたままにしておく必要があります。

于 2012-09-11T01:30:27.813 に答える