无法点击超链接div内的img

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

因为只是添加一个锚点（链接）不会使它按照您的意图工作。现在它完全按照你所说的去做;当你点击它时，它会转到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 3

是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 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不显示任何内容。 点击该图片div，我们可以显示下拉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>