Question

所以我基本上尝试了一切我能想到的东西。我想从我正在使用的图像中制作一个下拉菜单。光标确实成为一个指针。我真的迷失了我做错了。

这是我现在的HTML：

<a>

  <img class="dropbtn" id="profile" src="img/icons/Profiel.png" alt="Profiel" width="50px" heigt="50px">

    <div id="myDropdown" class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </img>
</a>

这是CSS：

/* Dropdown Button */
.dropbtn {
    cursor: pointer;
    background-color: none;
}


/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

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

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

Answer 1

使用以下代码

＆＃13;

$(".dropbtn").click(function() {
  $("#myDropdown").toggleClass("show");
});

＆＃13;

.dropbtn {
    cursor: pointer;
    background-color: none;
}


/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
a:hover .dropdown-content {display:block}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>

  <img class="dropbtn" id="profile" src="img/icons/Profiel.png" alt="Profiel" width="50px" heigt="50px">

    <div id="myDropdown" class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
 
</a>

＆＃13;

Answer 2

您是否愿意使用jQuery？

只需添加以下内容即可实现您的目标：

$(".dropbtn").click(function() {
  $("#myDropdown").toggleClass("open");
});

Codepen Demo

$(".dropbtn").click(function() {
  $("#myDropdown").toggleClass("open");
});

/* Dropdown Button */

.dropbtn {
  cursor: pointer;
  background-color: none;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content.open {
  display: block;
}

/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #f1f1f1
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<a>
  <img class="dropbtn" id="profile" src="http://placehold.it/350x350" alt="Profiel" width="50px" height="50px">

  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  </img>
</a>

Answer 3

点击图片后，您确定将下拉列表 CSS 更改为display: block;吗？

如果没有，请尝试一下（ JavaScript ）：

var trigger = document.getElementById("profile"),
    dropdown = document.getelementById("myDropdown");

trigger.onclick = function(){ // on image click
    dropdown.classList.toggle("active"); // toggle dropdown display
});

<强> CSS ：

或 jQuery （如果您在自己的网站中引用了它）：

$("#profile").click(function(){ // on image click
    $("#myDropdown").toggleClass("active"); // toggle dropdown display
});

确保（如果您还不知道）将上述内容添加到 HTML内script或<head>标记内的<body>标记中 document！

#myDropdown.active{ /* if #myDropdown has class "active" */
    display: block; /* make the dropdown visible */
}

希望这有帮助！： - ）

为什么我的下拉菜单没有显示？

3 个答案: