Question

我遇到的问题是在第二个链接中的第45-47行。如果该代码在那里，按钮将在点击时生成动画（这很好）但是下拉项目（“关于”，“存档”，“联系人”）将不会出现。如果我走45-47行，则会显示下拉项目，但不会出现动画。如何在单击按钮时同时显示动画和下拉项目？

我一直在努力整合来自这里的代码： http://www.w3schools.com/howto/howto_css_menu_icon.asp

这是在我的header.php文件中：

<div class="dropdown">
<button onclick="myFunction(this)"
            class="dropbtn">

            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>

            </button>

  <div id="myDropdown" class="dropdown-content">

    <a href="http://SITE/?page_id=289">About</a>
    <a href="http://SITE/?page_id=148">Archive</a>
    <a href="http://SITE/?page_id=318">Contact</a>

  </div>
</div>

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

function filterFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    div = document.getElementById("myDropdown");
    a = div.getElementsByTagName("a");
    for (i = 0; i < a.length; i++) {
        if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
            a[i].style.display = "";
        } else {
            a[i].style.display = "none";
        }
    }
}


function myFunction(x) {
    x.classList.toggle("change");
}

</script>

这是在我的style.css文件中：

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

Answer 1

我删除了所有我认为不必要的东西...... 为了清晰起见，重命名了一些课程。

我认为这就是你要找的。

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content 
And animates bars in the button */

$(".MenuToggle").click(function() {
    $("#myMenu").toggleClass("showMenu");
    $(this).children("div").toggleClass("change");
});

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

/* Rotate first bar */
.change.bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change.bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change.bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

.showMenu{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <button class="MenuToggle">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </button>

    <div id="myMenu" class="showMenu">
        <a href="http://SITE/?page_id=289">About</a>
        <a href="http://SITE/?page_id=148">Archive</a>
        <a href="http://SITE/?page_id=318">Contact</a>
    </div>
</div>

动画下拉按钮并显示列表？

1 个答案: