隱藏所有其他兄弟分區onclick

Question

在我的頁面中有像下面給出的列表。

<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）。另外我對上面的代碼有疑問。我的客戶說它有時會切換兩次..我沒有在任何瀏覽器中遇到過這種情況。上面的代碼是否有可能發生這種情況，或者他是否錯誤地編碼？

Answer 1

做這樣的事情：

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

你點擊都內的鏈接：.data_options。所以我們可以用它作爲參考，不是我們發現所有的.data_popup都包含了所有你想要的的DIV，除了當前的那個，你不想滑動那個。

如果它切換兩次，它可能會被綁定兩次？或者做一個雙擊而不是一次點擊。使用上面的代碼，當前項目將始終打開而不是切換。

Answer 2

請試試這個：

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(); 
    } 
});