0

だから私は構築しているものを持っています.ユーザーがli要素をクリックすると、メインの親コンテナと同じ高さのポップアップウィンドウが開きます.

<div class="tools">
   <ul>
      <li>
         <a>Click Me to Open Popup Window</a>
         <div class="popup">
             <header>Title Goes Here</header>
             <ul>
                List elements that clickable and close the popup.
             </ul>
         </div>
      </li>
   </ul>
</div>

このコードを使用して、すべてが正しく機能しています。

// this is the js that sets the height of the popup.
    var popHeight = $('.tools').height() - 23;
    $('.popup ul').css({'height': popHeight + 'px'});

// This is the js that reveals the popup.
    $('.tools ul li a').live('click', function(){
        $(this).parent().find('.popup').addClass('reveal');
    });

基本的な考え方は、ポップアップの ul は、.tools コンテナーの高さからヘッダーの高さを引いたものと同じ高さでなければならないということです。

ここで発生する唯一の問題は、要素が動的に追加されるため、高さ .tools が変更される可能性があることです。したがって、ポップアップをすでに一度開いている場合、.tools div の高さが変更され、クリックしてポップアップをもう一度開くと、その高さは最初のときと同じになり、同じ高さにサイズ変更されません。 .tools の新しい高さ。

では、ポップアップする前に .tools の高さを再チェックして常に正しい高さになるように、jquery で何ができるでしょうか。

ありがとう！

- 編集 -

クリック時にポップアップを表示する js を含めるのを忘れていました。だから私はそれを上に追加しました。ロード時にポップアップが非表示になり、タグをクリックすると、ポップアップにクラス .reveal が追加され、ポップアップが表示されます。

4

1 に答える 1

0

<a>をクリックすると、onclick イベントが発生します。JQueryコードをこのイベントにバインドできると思います...次のようなもの：

$('div.tools > ul > li > a').click(function(){  /* put your code here */  });

ここではテストしていませんが、役立つと思います。

于 2013-03-24T02:31:40.403 に答える