Question

这是我的代码：

     <img src="img/fastcall150.png" id="round" onclick="myFunction();" />
        <img src="img/gesturecall150.png" id="round" onclick="myFunctio();" class="dropbtn" />
         <div id="myDropdown" class="dropdown-content">
         <a href="javascript:myFunc()"> Shake Gesture</a>           
         </div>

    <script>
                /* When the user clicks on the button,
                 toggle between hiding and showing the dropdown content */
            function myFunctio() {
                document.getElementById("myDropdown").classList.toggle("show");
            }

            // Close the dropdown if the user clicks outside of it
            window.onclick = function(event) {
                if (!event.target.matches('.dropbtn')) {

                    var dropdowns = document.getElementsByClassName("dropdown-content");
                    var i;
                    for (i = 0; i < dropdowns.length; i++) {
                        var openDropdown = dropdowns[i];
                        if (openDropdown.classList.contains('show')) {
                            openDropdown.classList.remove('show');
                        }
                    }
                }
            }
</script>

这是CSS：

.dropbtn {
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}
.dropdown {

    position: relative;*/
    display: inline-block;*/
}

.dropdown-content {
    display: none;
/*    position: absolute;*/
text-align:center;
    background-color: #fff400;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #dadada}

.show {display:block;}

这就是我尝试过的，如果我在按钮上点击此代码一切都运作正常。但是当我在 img点击时尝试同样这样下拉不正确

Answer 1

这是一个更新的代码段。

第一张图片的t上有一个拼写错误myFunction();。它应该是onclick。
您需要将班级myFunctio();添加到第一张图片

或

将dropbtn更改为if (!event.target.matches('.dropbtn')) {

if (!event.target.matches('#round')) {

function myFunctio() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('#round')) {
    document.getElementById("myDropdown").classList.toggle("show");
  }
}

.dropbtn {
  cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
  background-color: #3e8e41;
}
.dropdown {
  position: relative;
  */ display: inline-block;
  */
}
.dropdown-content {
  display: none;
  /*    position: absolute;*/
  text-align: center;
  background-color: #fff400;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown a:hover {
  background-color: #dadada
}
.show {
  display: block;
}

Answer 2

我修复了它，并记住，永远不要为两个或多个元素设置相同的id，因为id是唯一的。如果要为许多元素添加相同的样式，请将相同的类设置为这些元素。祝好运！

       
       $(document).ready(function(){
             $('img').click(function(e){
             e.stopPropagation();
              $('#myDropdown').toggleClass('show');
       });
         
          window.onclick = function(event) {
            if (!event.target.matches('.dropbtn')) {
                
                var dropdowns = document.getElementsByClassName("dropdown-content");
                var i;
                for (i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
            }
        }
         
       });

img.round
{
    border-radius:50%;
    width:100px;
    height:100px;
    background-color:#ffcccc;
    display:block;
    outline:0;
    margin:25% auto;
    cursor: pointer;
    pointer-events: default;

}
.dropbtn {
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}
.dropdown {

    position: relative;*/
    display: inline-block;*/
}

.dropdown-content {
    display: none;
/*    position: absolute;*/
text-align:center;
    background-color: #fff400;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #dadada}

.show {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

        <img src="img/fastcall150.png" class="round test" />
        <img src="img/gesturecall150.png"  class="dropbtn round" />
       
       <div id="myDropdown" class="dropdown-content">
            <a href="javascript:myFunc()"> Shake Gesture</a>
        </div>

如何在imageclick上下拉？

2 个答案: