php - 如何在 WordPress 的 div 中使用 jQuery fadeIn() fadeOut() 文本

Question

我试图创建两个按钮，以便我可以使用orfadeIn()和我的 WordPress 菜单，但它不起作用......在下面的示例中，我正在尝试使用. 当我更改为使用标签时，它可以完美运行...fadeOut()idclassid#menu_jqueryp

   <script>
   $(document).ready(function(){
      $(".btn1").click(function(){
        $("#menu_jquery").fadeOut();
      });
      $(".btn2").click(function(){
        $("#menu_jquery").fadeIn();
      });
    });
   </script>

 <button class="btn1">Hide Menu</button>
<button class="btn2">Show Menu</button>

<div id="menu_jquery">
 <?php #wp_page_menu( 'sort_column=menu_order' ); ?>
</div>

Answer 1

它适用于此JSFiddle。

你确定你已经在你的 JavaScript 周围放置了脚本标签吗？

<script>
$(document).ready(function() {
    $(".btn1").click(function() {
        $("#menu_jquery").fadeOut();
    });
    $(".btn2").click(function() {
        $("#menu_jquery").fadeIn();
    });
});
</script>

Answer 2

$(document).ready(function(){
      $('#menu_jquery').hide();
      $(".btn1").click(function(){
          $("#menu_jquery").fadeOut();
      });
      $(".btn2").click(function(){
          $("#menu_jquery").fadeIn();
      });
});

Answer 3

尝试这个。它会起作用的。

<script>
    jQuery(document).ready(function($) {
        $(".btn1").click(function() {
            $("#menu_jquery").fadeOut();
        });
        $(".btn2").click(function() {
            $("#menu_jquery").fadeIn();
        });
    });
</script>

Answer 4

以下是我在“Houdini”脚本（http://cferdinandi.github.io/houdini/）中实现这一点的方法：

JavaScript：

(function($) {
    $(function () {
        $('.collapse-toggle').click(function(e) { // When a link or button with the .collapse-toggle class is clicked
            e.preventDefault(); // Prevent the default action from occurring
            var toggle = $(this);
            var dataID = toggle.attr('data-target'); // Get the ID of the target element
            toggle.toggleClass('active'); // Add or remove the '.active' class from the toggle element
            $(dataID).toggleClass('active'); // Add or remove the '.active' class from the target element
        });
    });
})(jQuery);

CSS：

/*  Force pointer on button */
.collapse-toggle {
    cursor: pointer;
}

/*  When expanded, hide "show" text. 
 *  When collapsed, hide "hide" text. */
.active .collapse-text-show,
.collapse-text-hide {
    display: none;
    visibility: hidden;
}

/*  When expanded, show "hide" text. */
.active .collapse-text-hide {
    display: inline;
    visibility: visible;
}

/* Hide the collapsed element */
.collapse {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    /*  Add animation when content expands and collapses */
    -webkit-transition: opacity 0.35s ease;
       -moz-transition: opacity 0.35s ease;
        -ms-transition: opacity 0.35s ease;
         -o-transition: opacity 0.35s ease;
            transition: opacity 0.35s ease;
}

/*  When collapsed element has the .active class, show it 
 *  Uses max-height instead of display: none to allow for 
 *  CSS3 animations, which don't work on display values. */
.collapse.active {
    max-height: 9999em;
    opacity: 1;
}

HTML（基于您上面的代码）：

<button class="collapse-toggle" data-target="#menu_jquery">
    <span class="collapse-text-show">Show Menu</span>
    <span class="collapse-text-hide">Hide Menu</span>
</button>

<div class="collapse" id="menu_jquery">
    <?php #wp_page_menu( 'sort_column=menu_order' ); ?>
</div>