Question

我正在尝试大约2个小时来完成一些如此简单的事情，但似乎有阻止我的功能工作的方式，我不明白是什么导致功能无法工作，我怎么能让它显示点击时图标的变化。

任何帮助将不胜感激，请参阅下面的链接，稍微调整浏览器大小，以便您看到菜单切换。

我正在尝试将div类更改为菜单关闭而不是单击菜单切换，这样会有一个不同的图标。

这是在网站上看到它的链接： http://didyouknowfacts.org/animals/

这是我的html + javascript：

.menu-toggle {
  cursor: pointer;
  font-size: 0;
  margin: 0;
  overflow: hidden;
  position: absolute;
  top: 17px;
  right: 10px;
  text-align: center;
}

.menu-toggle:before {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font: normal 30px/1 FontAwesome;
  text-decoration: inherit;
  vertical-align: text-bottom;
  color: #fff;
  content: "\f0c9";
  margin: 0;
}

.menu-close {
  cursor: pointer;
  font-size: 0;
  margin: 0;
  overflow: hidden;
  position: absolute;
  top: 17px;
  right: 10px;
  text-align: center;
}

.menu-close:before {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font: normal 30px/1 FontAwesome;
  text-decoration: inherit;
  vertical-align: text-bottom;
  color: #fff;
  content: "\f00d";
  margin: 0;
}

这是css：

 woocommerce_form_field( 'car_sel', array(
    'type'          => 'select',
    'class'         => 'populate-cars',
    'label'         => __('Car for this Event'),
    'options' => my_acf_load_field( array($carname) ),
    ), $checkout->get_value( 'car_sel' ));
function my_acf_load_field( $field )
 {

  get_currentuserinfo();
$id = get_current_user_id();

$args = array(
    'author'       => $id,
    'posts_per_page'   => -1,
    'orderby'          => 'post_title',
    'order'            => 'ASC',
    'post_type'        => 'car',
    'post_status'      => 'publish' );

$posts = get_posts( $args );

foreach ( $posts as $post ) {
    $carname[$post->post_title] = $post->post_title;

}


// Important: return the field
return $carname;

}

Answer 1

我打赌发生的事情就是当你写下这个

时

$( ".menu-toggle" ).switchClass( "menu-toggle", "menu-close", 1000 );

所有.menu-toggle个对象＆＃34;切换＆＃34;进入menu-close个对象，这意味着你的dom中只有一堆.menu-close个对象。当你以后写下这个：

$( ".menu-close" ).switchClass( "menu-close", "menu-toggle", 1000 );

所有.menu-close个对象变为.menu-toggle，意味着所有您的对象现在为.menu-close。

因此，我们只需将您的点击功能更改为指向当前点击的菜单项的指针。

$( "#openclose" ).click(function(){ //If this is not a unique name then it should by the way be a class, not an id.
    $( ".menu-toggle" ).switchClass( "menu-toggle", "menu-close", 1000 );
    $( this ).switchClass( "menu-close", "menu-toggle", 1000 })
})

Answer 2

如果我转到您的网页，我会看到错误“Uncaught ReferenceError：$ is not defined”。 jquery在脚本下面定义，因此$（function（）...根本不执行。

Answer 3

尝试使用addClass（）和removeClass（）。如果要切换它，可以使用if else语句。

$(document).ready(function(){
    $("button").click(function(){
        $('.blue').addClass('orange');
        $('.orange').removeClass('blue');
        $('div').animate({borderRadius: "100px"})
    });
});

.blue{
  height: 150px;
  width: 150px;
  border-radius: 5px;
  border: 1px solid black;
  background-color: royalblue;
  }

.orange{
  background-color: orange;
  height: 150px;
  width: 150px;
  border-radius: 5px;
  border: 1px solid black;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='blue'></div>

<button> Change Color</button>

在我的导航栏中切换切换图标

3 个答案: