CODEWITHSUNDEEP
javascriptjqueryhtmlcss
m-ketan
m-ketan

Reputation: 1308

Not able to click img inside hyperlinked div

I am trying to show a dropdown when the gear-img div is clicked using jQuery but since it's wrapped inside an a tag, it ends up redirecting me to the url and I also want the whole div clickable. Please suggest a fix or a better way to achieve this.

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

Upvotes: 0

Views: 622

Answers (5)

DIksha Ahuja
DIksha Ahuja

Reputation: 54

You can just do this. Initially, keep your dropdown div display none. On click of that image div, we can show the dropdown div.Please find the code and let me know if you need further help.

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

Upvotes: 0

Neeraj Pathak
Neeraj Pathak

Reputation: 759

try this one:

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

Upvotes: 0

Ehsan
Ehsan

Reputation: 12969

An element that is inline elements should not contain block elements.

Change code like this:

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

Upvotes: 1

dev8080
dev8080

Reputation: 4030

You could stop propagating the event onto the parent a tag :

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

Add you clickable behaviour differently for every different-behaving div.

Upvotes: 2

Martijn
Martijn

Reputation: 16123

Because just adding an anchor (a link) doesnt make it work as you intend. It now does exactly what you told it to do; When you click it, it goes to Google.

You can drop the anchor add a little 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>

and then you can use a little code to toggle the list:

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

Upvotes: 0

Related Questions