LI

Question

以内に、私は、slidetoggleとクリックで表示/非divを表示しようとしていては、正常に動作しますが、私はinputをクリックすると、そのまだ表示/隠し、どのように私はそれがない上だけLIに取り組んで作るんときSlidetoggleが正常に動作していません内部要素。

：ここ

は、私が持って働いてJSfiddle Demo

制限は、私はLIのうちdivが、現在そのLIタグここ

内では、私がそのために作成した関数であることをもたらすことはできないです

$('#location').click(function(){ 
    $(".location_contents").slideToggle(600); 
    $(".header_right > ul > li:nth-child(1)").toggleClass('actbtn'); 
}); 

Answer 1

親divをクリックしているときに関数をトリガーする場合は、子がクリックされたときにトリガーされます。直接子セレクターを使用することもできます。

$('#location > a').click(function(){ 
     $(".location_contents").slideToggle(600); 
     $(".header_right > ul > li:nth-child(1)").toggleClass('actbtn'); 
}); 

Answer 2

あなたはこれをお探しですか？

多く<a>を使用することができるので、私は<a>にクラスtoggleableを追加して、スクリプトでは、私は2つのセレクタ1 toggleable クラスと別のリスト項目を選択しました。

$('#location .toggleable, #location ul li').click(function(){ 
 
     $(".location_contents").slideToggle(600); 
 
\t \t $(".header_right > ul > li:nth-child(1)").toggleClass('actbtn'); 
 
});

/*Location Popup*/ 
 
.location_contents {background: #fff; max-width: 450px; min-width: 450px; position: absolute; left: 0; top: 68px; width: 100%; z-index: 2; border-radius:4px; box-shadow:0 6px 8px -1px rgba(0, 0, 0, 0.5); display:none;} 
 
.location_contents:after {bottom: 100%; left: 85%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(232, 248, 255, 0); border-bottom-color: #e8f8ff; border-width: 15px; margin-left: -15px;} 
 
.location_contents_head {background: #e8f8ff; float: left; padding: 15px; width: 100%; box-sizing:border-box; color:#404040;} 
 
.location_contents_head > input{width:100%; display:block; padding:8px; border:1px solid #d7d7d7; font-size:14px; color:#404040; box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset; height:45px;} 
 
.location_contents_body{float:left; width:100%; background:#fff; padding:15px; box-sizing:border-box; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;} 
 
.location_contents_body > ul{list-style:none; margin:0; padding:0;} 
 
.location_contents_body > ul > li{display:block; float:left; font-size:14px; color:#404040; display:block; float:left; min-width:140px; text-align:left; padding:3px 0;} 
 
.location_contents_body > ul > li > span {padding: 4px 10px; display:inline-block; transition: all 0.3s ease 0s; border-radius: 2px;} 
 
.location_contents_body > ul > li:hover > span {background: #0076AA; color: #fff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header_right"> 
 
    <ul> 
 
     <li id="location" class="actbtn"> 
 
      <i class="ico ico_location"></i> <a href="#" class="toggleable">Delhi/NCR</a> 
 
      <div class="location_contents" style="display: block;"> 
 
       <div class="location_contents_head"><input placeholder="Enter Your City" type="text"></div> 
 
       <div class="location_contents_body"> 
 
        <ul> 
 
         <li><span>Agra</span></li> 
 
         <li><span>Aligarh</span></li> 
 
         <li><span>Allahabad</span></li> 
 
         <li><span>Ambala</span></li> 
 
         <li><span>Amritsar</span></li> 
 
         <li><span>Bhopal</span></li> 
 
         <li><span>Chandigarh</span></li> 
 
         <li><span>Dehradoon</span></li> 
 
         <li><span>Delhi/NCR</span></li> 
 
         <li><span>Indore</span></li> 
 
         <li><span>Lucknow</span></li> 
 
         <li><span>Ludhiana</span></li> 
 
         <li><span>Mathura</span></li> 
 
         <li><span>Meerut</span></li> 
 
         <li><span>Patiala</span></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </li> 
 
     <li id="login"><i class="ico ico_user"></i> Login</li> 
 
    </ul> 
 
</div>