Question

我正在尝试使用jQuery点击gear-img div时显示下拉列表，但由于它包含在a标记内，它最终会将我重定向到url并且我还想要整个div点击。请建议修复或更好的方法来实现这一目标。

<a href="http://www.google.com">
  <div class="content">
    <div class="gear-img"><img src="images/ic-settings-black-24-px.svg"></div>
    <div class="dropdown"></div>
  </div>
</a>

Answer 1

您可以停止将事件传播到父标记：

$(".gear-img").click( function(event){
     //you toggling code here....
     event.preventDefault();
     event.stopPropagation();
});

为每个不同行为的div添加不同的可点击行为。

Answer 2

inline个元素的元素不应包含block个元素。

更改此代码：

$(document).ready(function(){
  $('.gear-img').click(function(){
    $('.dropdown').toggle();
  })
})

.dropdown {
  display: none;
}

 img {
  width: 50px;
  cursor: pointer;
  margin-top:10px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://www.google.com">redirect to google</a> 
<div class="content">
  <div class="gear-img"><img title="Show dropdown" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg"></div>
<div class="dropdown">Dropdown</div>

Answer 3

因为只添加一个锚点（一个链接）并不能使它按预期工作。它现在完全按照你的要求去做;当您点击它时，它会转到Google。

你可以删除锚点添加一点jQuery：

<div class="content">
    <div class="gear-img"><img src="images/ic-settings-black-24-px.svg"></div>
    <div class="dropdown"> A<br/> B<br/> B<br/> </div>
</div>

然后您可以使用一些代码来切换列表：

$('.content').on('click', '.gear-img', function(){
    $(this).find('.dropdown').slideToggle();
})

Answer 4

试试这个：

$(function(){
  $('.gear-img img').on('click',function(e){
    e.stopPropagation()
    $('.dropdown ul li').toggle('show');
    console.log('Image Clicked!');
  });
  
  $('a').on('click',function(e){
    e.stopPropagation()
     $('.gear-img img').click()
    return false;
  });
});

.show{
  display:block;
}
.dropdown ul li{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://www.google.com">
Click Here!
  <div class="content">
    <div class="gear-img"><img src="https://indianflag.co.in/wp-content/uploads/2016/12/2.j"></div>
    <div class="dropdown">
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    </ul>
    </div>
  </div>
</a>

Answer 5

你可以这样做。最初，保持您的下拉列显示无。点击该图片div后，我们可以显示下拉列表。请找到代码，如果您需要进一步的帮助，请告诉我。

    <a href="http://www.google.com">
    </a>
    <div class="content">
       <div class="gear-img" onclick="fun()"><img src="images/ic-settings-black-24-px.svg">
       </div>
       <div id="dropdown" class="dropdown" style="display:none">
       </div>
    </div>
    <script>
 function fun()
 {
      var x=document.getElementById("dropdown");
      x.style.display="block";
 }
</script>

无法在超链接div

5 个答案: