切換/文件/點擊並關閉其他？

Question

這是場景。

步驟1-點擊操作會打開一個下拉菜單，點擊下拉區域和操作文本之外的任何地方都可以關閉該下拉菜單。

問題1-我希望這也可以使點擊的行動文字只關閉。因此，解決方案將在點擊下拉區域以外的任何地方以及點擊操作文本時關閉。

第2步 - 多個動作的文字點擊打開多個下拉菜單。

問題2-我想要它的方式，如果得到開放其他得到接近。

代碼：

$('.ToggleClass a').click(function(ev) { 
 
    $(this).next('.ActionDropDown').fadeIn(500); 
 

 

 
}); 
 
$(document).click(function(e) { 
 
    e.stopPropagation(); 
 
    var container = $(".ToggleClass"); 
 

 
    //check if the clicked area is dropDown or not 
 
    if (container.has(e.target).length === 0) { 
 
    $('.ActionDropDown').fadeOut(500); 
 
    } 
 

 
});

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    float: left; 
 
    box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    font-family: arial; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
body, 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #cbeeff 
 
} 
 

 
.row1 { 
 
    width: 100%; 
 
    background: #fff; 
 
    margin: 5px 0; 
 
} 
 

 
.row1-2 { 
 
    width: 50%; 
 
    position: relative; 
 
    text-align: center; 
 
    padding: 10px 0; 
 
    border-right: 2px solid #000 
 
} 
 

 
.row1-2+.row1-2 { 
 
    border-right: 0px; 
 
} 
 

 
.row1-2 a { 
 
    color: #ff4886; 
 
    float: none; 
 
} 
 

 
.ActionDropDown { 
 
    position: absolute; 
 
    background: #7bd4ff; 
 
    border: 2px solid #000; 
 
    top: 20px; 
 
    padding: 30px 10px; 
 
    display: none; 
 
    z-index: 9; 
 
    right: 0px; 
 
    left: 0px; 
 
    max-width: 180px; 
 
    margin: 0px auto; 
 
} 
 
.InfoDiv{ width:100%; padding:10px; background:#ffadc9;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-----Row 1---------> 
 
<div class="row1"> 
 
    <div class="row1-2">Simple Text</div> 
 
    <div class="row1-2 ToggleClass"> <a href="#">Action</a> 
 
    <div class="ActionDropDown"> 
 
     I am a Drop Down ! 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-----Row 1---------> 
 
<!-----Row 2---------> 
 
<div class="row1"> 
 
    <div class="row1-2">Simple Text</div> 
 
    <div class="row1-2 ToggleClass"> <a href="#">Action</a> 
 
    <div class="ActionDropDown"> 
 
     I am a Drop Down ! 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-----Row 2---------> 
 
<!-----Row 3---------> 
 
<div class="row1"> 
 
    <div class="row1-2">Simple Text</div> 
 
    <div class="row1-2 ToggleClass"> <a href="#">Action</a> 
 
    <div class="ActionDropDown"> 
 
     I am a Drop Down ! 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-----Row 3---------> 
 

 
<div class="InfoDiv"> 
 
<b>Info:</b> Right now click on Action on each row open drop down multiple times. What I want is when one drop down is open on click of action , the other drop down if open should get close. 
 
</div>

Answer 1

看到下面的代碼片段或jsfiddle

該行添加到您的jQuery：

$(this).parents(".row").siblings(".row").find(".ActionDropDown").fadeOut(500)

在HTML還加入了通用類的所有父行（類row）

你需要搜索其它ActionDropDown並關閉它，你打開另一個

編輯，同時：增加了新的JQ對於點擊容器+說明

之外的代碼，你可以添加新條件的IF

&& $(".ActionDropDown").has(e.target).length === 0) - >如果點擊的元素不是後裔。只有當你需要它

看到更新的小提琴或摘錄如下

EDIT2：添加條件，以檢查是否下拉是開放的，當點擊同樣的動作。

var dropDown = $(this).next('.ActionDropDown') 
if ($(dropDown).is(":visible")) { 
    $(dropDown).fadeOut(500) 
} else { 
$(dropDown).fadeIn(500) 
} 

看到片斷低於或更新的小提琴

$('.ToggleClass a').click(function(ev) { 
 
var dropDown = $(this).next('.ActionDropDown') 
 
    if ($(dropDown).is(":visible")) { 
 
\t $(dropDown).fadeOut(500) 
 
\t } else { 
 
\t $(dropDown).fadeIn(500) 
 
\t } 
 

 
\t $(this).parents(".row").siblings(".row").find(".ActionDropDown:visible").fadeOut(500) 
 

 

 
}); 
 
$(document).mouseup(function (e) 
 
{ 
 

 
    if (!$(".ActionDropDown").is(e.target)) // if the target of the click is not the dropDown 
 
    { 
 
     $(".ActionDropDown").fadeOut(500); 
 
    } 
 
});

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    float: left; 
 
    box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    font-family: arial; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
body, 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #cbeeff 
 
} 
 

 
.row1 { 
 
    width: 100%; 
 
    background: #fff; 
 
    margin: 5px 0; 
 
} 
 

 
.row1-2 { 
 
    width: 50%; 
 
    position: relative; 
 
    text-align: center; 
 
    padding: 10px 0; 
 
    border-right: 2px solid #000 
 
} 
 

 
.row1-2+.row1-2 { 
 
    border-right: 0px; 
 
} 
 

 
.row1-2 a { 
 
    color: #ff4886; 
 
    float: none; 
 
} 
 

 
.ActionDropDown { 
 
    position: absolute; 
 
    background: #7bd4ff; 
 
    border: 2px solid #000; 
 
    top: 20px; 
 
    padding: 30px 10px; 
 
    display: none; 
 
    z-index: 9; 
 
    right: 0px; 
 
    left: 0px; 
 
    max-width: 180px; 
 
    margin: 0px auto; 
 
} 
 
.InfoDiv{ width:100%; padding:10px; background:#ffadc9;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-----Row 1---------> 
 
<div class="row row1"> 
 
    <div class="row1-2">Simple Text</div> 
 
    <div class="row1-2 ToggleClass"> <a href="#">Action</a> 
 
    <div class="ActionDropDown"> 
 
     I am a Drop Down ! 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-----Row 1---------> 
 
<!-----Row 2---------> 
 
<div class="row row1"> 
 
    <div class="row1-2">Simple Text</div> 
 
    <div class="row1-2 ToggleClass"> <a href="#">Action</a> 
 
    <div class="ActionDropDown"> 
 
     I am a Drop Down ! 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-----Row 2---------> 
 
<!-----Row 3---------> 
 
<div class="row row1"> 
 
    <div class="row1-2">Simple Text</div> 
 
    <div class="row1-2 ToggleClass"> <a href="#">Action</a> 
 
    <div class="ActionDropDown"> 
 
     I am a Drop Down ! 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-----Row 3---------> 
 

 
<div class="InfoDiv"> 
 
<b>Info:</b> Right now click on Action on each row open drop down multiple times. What I want is when one drop down is open on click of action , the other drop down if open should get close. 
 
</div>