Question

我正在尝试使用div点击显示/隐藏slidetoggle，其工作正常但是当我点击input时，它仍显示/隐藏，我该如何使其正常工作仅在LI而不在内部元素上。

我有的限制是我无法将div从LI中带出目前LI标记内的<{1}}

这是我为此创建的函数：

$('#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

你在找这个吗？

我在toggleable中添加了一个课程<a>，因为可能会有用许多<a>在脚本中我选择了2个选择器toggleable class和另一个列表项。

＆＃13;

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

＆＃13;

/*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;}

＆＃13;

<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>

＆＃13;

在LI内时，Slidetoggle无法正常工作

2 个答案: