使用 jQuery 切换菜单

Question

我一直在绞尽脑汁如何在我的网站上包含一个切换菜单，经过一些搜索我找到了下面的内容并实现了它，这太棒了！

<div>
<h1><button class="button" data-circle="travel">
<i class="fa fa-plus-square"></i>
</button> Travel</h1>
</div>
<div class="travel options">
<ul>
<li>Travel</li>
<li>Vehicles</li>
</ul>
</div>

var localStorageKey = "app_state";

// to preserve state, you first need to keep track of it
var default_state = {
    biographies: false,
    pictures: false,
    poetry: false
}

var saved_state = localStorage.getItem(localStorageKey);

// ternary operator which means if `saved_state` is true we parse it and use that value for `state`; otherwise use `default_state`
var state = saved_state ? JSON.parse(saved_state) : default_state;

$(function() {
    init();

    $('.button').on('click', function() {
        var circle = $(this).attr('data-circle');
        toggleCircle(circle, !state[circle]);
        $(this).find('i').toggleClass('fa-minus fa-plus');
    });
});


function init() {
    for(var key in state) {
        var is_displayed = state[key];
        if ( is_displayed ) {
        $(this).find('i').toggleClass('fa-minus fa-plus');
        } else {
        $(this).find('i').toggleClass('fa-plus fa-plus');
        }
        console.log(is_displayed);
        toggleCircle(key, is_displayed);
    }
}

function toggleCircle(circle, is_displayed) {
    if (is_displayed) {
        $('.'+circle).show()
        state[circle] = true;
    } else {
        $('.'+circle).hide()
        state[circle] = false;
    }
    
    localStorage.setItem(localStorageKey, JSON.stringify(state));
}

但是.. 如果您最小化菜单然后刷新图标显示 - 即使它已经最小化。有什么办法可以改变这个吗？

我发现上面的代码不是我自己的，我找不到可以信任的人！我的jquery很糟糕。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

请试试这个..

$('.button').click(function(){
  var whichbtn = $(this).attr('data-circle');
  if($("."+whichbtn).hasClass("hidden")){
    $(this).children("i").removeClass("fa-plus").addClass("fa-minus");
  }else{
    $(this).children("i").addClass("fa-plus").removeClass("fa-minus");
  }
  $("."+whichbtn).toggleClass("hidden");
});

.hidden{display:none;}
.button{
  background:#00cc00;
  padding:10px 20px;
  margin-right:10px;
  border:none;
  color:white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="m-3">
  <div class="biographies hidden mb-2 font-weight-bold">Biography</div>
  <div class="pictures hidden mb-2 font-weight-bold">Pictures</div>
  <div class="poetry hidden mb-2 font-weight-bold">Poetry</div>

  <button class="button" data-circle="biographies">
      <i class="fa fa-plus"></i> biographies
  </button>

  <button class="button" data-circle="pictures">
      <i class="fa fa-plus"></i> pictures
  </button>

  <button class="button" data-circle="poetry">
      <i class="fa fa-plus"></i> poetry
  </button>
</div>

我为 button 的 click 事件添加 js 并获取它自己的 data-circle 属性以查找单击了哪个按钮。 fa fa-plus 图标也更改为 fa fa-minus。仅此而已。 toggleClass 用于在用户单击按钮时切换 class。首先单击添加 class hidden 然后第二次单击删除 class hidden。有关更多说明，请评论我。

Answer 2

jsFiddle DEMO（因为 SO 片段不允许来自 Iframe 的 localStorage）

使用 ID，而不是类。 ID 是唯一的，而不是类.
将整个 ID 存储为对象属性即："#pictures": false,
将整个选择器存储在 data-* 中，即：data-toggle="#biographies"
使用"is-*"类作为状态CSS助手："is-hidden"、"is-expanded"
您不必使用 .fa 类，只需使用 CSS 和 font-family
利用 Object.assign() 将您的默认值替换为本地存储中的默认值（如果有）。
在初始化菜单状态时使用 Object.entries() 循环对象键值对。

// Override defaults with localStorage
const state = Object.assign({
  "#biographies": false,  // Feel free to change this default boolean
  "#pictures": false,
  "#poetry": false
}, JSON.parse(localStorage.state || "{}"));

const toggle = (k, v) => {
  $(k).toggleClass('is-hidden', !v);
  $(`[data-toggle="${k}"]`).toggleClass('is-expanded', v);
};

// On init
Object.entries(state).forEach(([k, v]) => toggle(k, v));

// On click
$("[data-toggle]").on("click", function() {
  const id = this.dataset.toggle; // Get ID i.e: "#pictures"
  state[id] = !state[id]; // Flip boolean
  toggle(id, state[id]); // Trigger UI changes
  localStorage.state = JSON.stringify(state); // Store into LS
});

.is-hidden {
  display: none;
}

[data-toggle] i:before{
  font-family: "FontAwesome";
  font-style: normal;
  content: "\f067"; /* Plus */
}

[data-toggle].is-expanded i:before{
  content: "\f068"; /* Minus */
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

<div id="biographies" class="is-hidden">Biography</div>
<div id="pictures" class="is-hidden">Pictures</div>
<div id="poetry" class="is-hidden">Poetry</div>

<button type="button" class="button" data-toggle="#biographies">
  <i></i> biographies
</button>

<button type="button" class="button" data-toggle="#pictures">
  <i></i> pictures
</button>

<button type="button" class="button" data-toggle="#poetry">
  <i></i> poetry
</button>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

使用 jQuery 切换菜单

Toggle menu with jQuery

html

css

jquery

toggle