1

私のページには、以下のようなリストがあります。 

<li class="select">
  <div class="type"><span class="icon_word_small bgpos"></span></div>
  <div class="docu"> <span class="fade"><a href="">Study on Clinical Research Market in AMEA</a> / 24 July 2011</span></div>
  <div class="colu"> <span class="fade"><a href="">Fairleign</a>, <a href="">Felder</a> & 2 more</span></div>
  <div class="status"><span class="fade"><span class="dark">Public</span> [2 Views 1 Downloads]</span></div>
  <div class="data_options"><a href="#" class="itemDelete">DELETE</a> </div> <!-- row hover options here-->
      <!-- popup starts here-->
    <div class="data_popup data_delete"><span class="tip"></span>Are you sure want to delete this file?
    <div class="cfix"></div>
  <ul>
    <li><a href="#" class="deletebutton"></a></li>
    <li><a href="">No,Keep this file</a></li>
  </ul>
  </div>
        <!-- popup ends here--> 
  <div class="cfix"></div>
</li>

<li>
  <div class="type"><span class="icon_word_small bgpos"></span></div>
  <div class="docu"> <span class="fade"><a href="">Study on Clinical Research Market in AMEA</a> / 24 July 2011</span></div>
  <div class="colu"> <span class="fade"><a href="">Fairleign</a>, <a href="">Felder</a> & 2 more</span></div>
  <div class="status"><span class="fade"><span class="dark">Public</span> [2 Views 1 Downloads]</span></div>

  <div class="data_options"><a href="#" class="itemShare">SHARE</a></div>  <!-- row hover options here-->
    <!-- popup starts here-->
   <div class="data_popup data_share"><span class="tip"></span><h3>Share</h3>
   <br>
  <p> <input type="checkbox" /> All in our Company</p>
     <p> <input type="checkbox" /> All in Department</p>
           <p> <input type="checkbox" id="sharetick"/> Shared with Specific People</p>
           <div id="textareamsg1"><p><textarea class="resizable" id=""></textarea></p> </div>
           <p> <input type="checkbox" id="nonsharetick"/> Do not share with specific people</p>
             <div id="textareamsg2"><p><textarea class="resizable dark" name="textarea" id="" placeholder="Type names to share document, to share with 
many seperate names with commas"></textarea></p></div>

    <div class="cfix"></div>

  <ul>
    <li><a href="#" class="okbutton"></a></li>
    <li><a href="">Cancel</a></li>
  </ul>
  </div>
      <!-- popup ends here-->
  <div class="cfix"></div>
</li>

これを使用してdiv.dataDelete、itemShareを表示/非表示にします

$('.itemDelete').live('click', function() {
    $(this).closest("li").find('.data_delete').slideToggle('medium');
});

$('.itemShare').live('click', function() {
    $(this).closest("li").find('.data_delete').slideToggle('medium');
});

他のリンクをクリックすると、開いている他のすべてのdiv（itemDeleteとitemShareの両方）を非表示にする必要があります。また、上記のコードにも疑問があります。私のクライアントはそれが時々2回トグルしていると言います..私はどのブラウザでもそれを経験しませんでした。上記のコードでこれが発生する可能性はありますか、それとも彼はそれを間違ってコーディングしていますか？

4

2 に答える 2

0

これを試してください：

var q = 0;
$('.itemDelete, .itemShare').live('click',
function() {
    if (q == 1) {
        q = 0;
        $(this).parent().next('.data_delete, .data_share').slideToggle();
    } else {
        q = 1;
        $('.data_delete, .data_share').not($(this).parent().next('.data_delete, .data_share')).slideToggle();
    }
});
于 2011-11-23T12:27:20.093 に答える
0

次のようなことをします：

$(".data_options a").live("click", function(e){
    e.preventDefault();
    $(".data_popup").slideUp();
    $(this).closest(".select").find(".data_popup").stop(true, false).slideDown();
});

クリックしているリンクは両方とも内部にあります：.data_options。したがって、これを参照として使用できます。現在のDIVを除いて、.data_popup必要なすべてのDIVが含まれているものがすべて見つかるわけではありません。これを下にスライドする必要はありません。slideUp

2回トグルすると、2回バインドされる可能性がありますか？または、シングルクリックではなくダブルクリックを実行します。上記のコードでは、現在のアイテムはトグルではなく常に開いています。

于 2011-11-23T12:20:56.133 に答える