自定義選擇框，如果不是自定義選擇框及其子級，請單擊滑動

Question

我正在創建自定義選擇框。我想要的是當不是自定義選擇框（具有一個selectbox_ui類的元素）和它的子元素被單擊，然後slideUp其他如果自定義選擇框（具有一類selectbox_ui的元素）及其子元素被單擊然後slideDown。下面是我的代碼片段，但應該上下選擇框選項的功能可悲的是無法正常工作。任何幫助，建議，建議，線索和想法非常感謝。謝謝！

$(document).ready(function() { 
 
    $(".thehide").hide(); 
 
    $(".selectbox_ui").click(function (e) { 
 
     var current_event = $(this); 
 
     if ($(".selectbox_ui_dp", this).is(":visible")) { 
 
      $(".selectbox_ui_dp", this).slideUp(); 
 
     } else { 
 
      $(".selectbox_ui_dp", this).slideDown(); 
 
     } 
 
     e.preventDefault(); 
 
    }); 
 
    $(document).on("click", function (e) { 
 
     if ($(this).attr("class") !== "selectbox_ui") { 
 
      $(".selectbox_ui_dp").slideUp(); 
 
     } 
 
    }); 
 
});

.selectbox_ui { 
 
    width: 100%; 
 
    padding: 5px 0px; 
 
    border-top: none; 
 
    border-left: none; 
 
    border-right: none; 
 
    border-bottom: 1px solid #cccccc; 
 
    margin: 0px; 
 
    font: normal 15px 'mplight', sans-serif; 
 
    height: 30px; 
 
    background: none; 
 
} 
 

 
    .selectbox_ui .selectbox_ui_label { 
 
     color: #5a5a5a; 
 
     font: normal 15px 'mpregular', sans-serif; 
 
     padding: 0px; 
 
     margin: 0px; 
 
     position: absolute; 
 
     text-transform: uppercase; 
 
     width: 93%; 
 
    } 
 

 
     .selectbox_ui .selectbox_ui_label span { 
 
      display: block; 
 
     } 
 

 
.selectbox_ui_dp { 
 
    width: 94%; 
 
    position: absolute; 
 
    z-index: 9999; 
 
    background: #fff; 
 
    padding: 7px; 
 
    margin: 0px; 
 
    font: normal 15px 'mplight', sans-serif; 
 
    text-decoration: none; 
 
    list-style: none; 
 
    -webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3); 
 
    -moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3); 
 
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3); 
 
} 
 

 
    .selectbox_ui_dp li { 
 
     text-decoration: none; 
 
     clear: both; 
 
     float: none; 
 
     list-style: none; 
 
    } 
 

 
     .selectbox_ui_dp li a { 
 
      font: normal 15px 'mplight', sans-serif; 
 
      color: #5a5a5a; 
 
      text-decoration: none; 
 
      display: block; 
 
     } 
 

 
.dodong_ui .input_wrapper { 
 
    margin: 5px 0px; 
 
    display: block; 
 
} 
 

 
    .dodong_ui .input_wrapper label { 
 
     color: #5a5a5a; 
 
     font: normal 15px 'mpregular', sans-serif; 
 
     padding: 0px; 
 
     margin: 0px; 
 
     position: absolute; 
 
     text-transform: uppercase; 
 
    } 
 

 
    .dodong_ui .input_wrapper select { 
 
     width: 100%; 
 
     padding: 5px 0px; 
 
     border-top: none; 
 
     border-left: none; 
 
     border-right: none; 
 
     border-bottom: 1px solid #cccccc; 
 
     margin: 0px; 
 
     font: normal 15px 'mplight', sans-serif; 
 
     -webkit-appearance: none; 
 
     -moz-appearance: none; 
 
     appearance: none; 
 
    } 
 

 
    .dodong_ui .input_wrapper input, .dodong_ui .input_wrapper textarea { 
 
     background: none; 
 
     width: 100%; 
 
     padding: 5px 0px; 
 
     border-top: none; 
 
     border-left: none; 
 
     border-right: none; 
 
     border-bottom: 1px solid #cccccc; 
 
     margin: 0px; 
 
     font: normal 15px 'mplight', sans-serif; 
 
     height: 26px; 
 
     overflow: hidden; 
 
    } 
 

 
     .dodong_ui .input_wrapper input:focus, .dodong_ui .input_wrapper input:active, .dodong_ui .input_wrapper input:hover, .dodong_ui .input_wrapper textarea:active, .dodong_ui .input_wrapper textarea:focus { 
 
      outline: none; 
 
     } 
 

 
.dodong_ui button { 
 
    display: table; 
 
    margin: 0 auto; 
 
    padding: 8px 11px 3px 11px; 
 
    color: #fff; 
 
    font: normal 'mpregular', sans-serif; 
 
    text-transform: uppercase; 
 
    border-top: none; 
 
    border-left: none; 
 
    border-right: none; 
 
    border-bottom: 3px solid #659d24; 
 
    background: #76b729; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row daselect clear extend dodong_ui"> 
 
    <form class="ajaxform extend clear"> 
 
     <input type="hidden" name="ticket_sender" value="ebdul kerem muhemmed abubeker" /> 
 
     <fieldset> 
 
      <div class="input_wrapper extend clear"> 
 
       <!-- <select class="extend clear" name="urgency" required=""> 
 
           <option value="normal">Normal</option> 
 
           <option value="medium">Medium</option> 
 
           <option value="urgent">Urgent</option> 
 
          </select> --> 
 
       <div class="extend clear selectbox_ui"> 
 
        <div class="selectbox_ui_label extend clear"><span class="extend align_left">Urgency Level</span><span class="ion-ios-arrow-down align_right"></span></div> 
 
        <ul class=" thehide selectbox_ui_dp extend clear"> 
 
         <li><a href="#">Normal</a></li> 
 
         <li><a href="#">Medium</a></li> 
 
         <li><a href="#">Urgent</a></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
      <div class="input_wrapper extend clear"> 
 
       <label class="extend clear">attachment</label> 
 
       <input class="extend clear" type="text" class="extend clear attachment" value="" required /> 
 
      </div> 
 
      <div class="input_wrapper extend clear"> 
 
       <label class="extend clear">Message</label> 
 
       <textarea class="extend clear" name="message"></textarea> 
 
      </div> 
 
      <div class="input_wrapper extend clear"> 
 
       <button class="extend clear">Submit</button> 
 
      </div> 
 
     </fieldset> 
 
    </form> 
 
</div>

Answer 1

下面是你需要的解決方案。您可以使用stopPropagation而不是preventdefault。也可以使用target來查找attr。

$(document).ready(function(){ 
    $(".thehide").hide(); 
$(".selectbox_ui").click(function(e){ 
      var current_event = $(this); 
      if($(".selectbox_ui_dp", this).is(":visible")){ 
       $(".selectbox_ui_dp", this).slideUp(); 
      }else{ 
       $(".selectbox_ui_dp", this).slideDown(); 
      } 
      e.stopPropagation(); 
     }); 
     $(document).on("click", function(e){ 
      if(!($(e.target).hasClass("selectbox_ui"))){ 
       $(".selectbox_ui_dp").slideUp(); 
      } 
     }); 
});