Question

的CSS：

#header {
    height: 55px;
    text-align: center;
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 6;
    /*background-color: rgba(24,24,29,0.4);*/
    background: url('../images/head1.png');
}

.pageLink {
    margin: auto 18px;
    align-self: center;
    position: relative;
    vertical-align: middle;
    font-size: 0.9em;
    letter-spacing: 1px;
    white-space: nowrap;
}

.pageLink {
    text-decoration: none;
    color: white;
}

.home1 {
    padding-top: 7px;
    padding-right: 20px;
}

#authLink {
    z-index: 500;
    top: 35%;
    right: 0;
    font-size: 0.8em;
    position: absolute;
}

.fa-caret-down {
    color: #cf5630;
}

我有这段代码：

echo '<span id= "authLink" class= "pointer absolute">';
echo'<span class= "pageLink text" style="border-bottom: none"><i class="fa fa-bell"></i>Hi,';
echo $firstname;
echo '! <i class="fa fa-caret-down"></i> I <i class="fa fa-shopping-cart"></i> </span>';
echo '</span>';

当我点击“fa-caret-down”显示下拉框并且里面是“Logout”链接时是否可能？我尝试通过纯Css做但它没有用，也许用javascript它会吗？任何人都可以帮忙吗？

Answer 1

好吧，下面的示例显示或隐藏图像上的下拉列表，单击使用javaScript。

＆＃13;

$(document).ready(function(){

$("#imageTag").click(function(){
      $("#dropdown_change").toggle();
     });

     $("#dropdown_change").change(function(){
      alert("Selected value is : " + document.getElementById("dropdown_change").value);
     });
   });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myform">
click me to show/hide dropdown --> 
<img id ="imageTag" src="http://www.altpress.com/images/uploads/news/Hello_Kitty.jpg" alt="This is a cool picture" width="80px" /> 
</br>
</br>
</br>
  
 
   <select id="dropdown_change">
 
      <option value="Sunday">Sun</option>
 
      <option value="Monday">Mon</option>
 
      <option value="Tuesday">Tue</option>
 
      <option value="Wednesday">Wed</option>
  
      <option value="Thursday">Thu</option>
  
      <option value="Friday">Fri</option>
  
      <option value="Saturday">Sat</option>
 
</select>
</form>

＆＃13;

如果你想扩展下拉选项，这是类似的问题 - How to open select element using jquery

希望这会对你有所帮助。

快乐编码：）

单击一个图标，它会显示一个通过javascript下拉列表

1 个答案: