javascript - 数组中的汉堡菜单

Question

我的汉堡菜单代码需要帮助。我需要使用这个数组在 jquery 中创建菜单元素:

var menu = [{
  'title': 'Save',
  'onclick': function() {
    alert('Open clicked');
  }
}, {
  'title': 'Load',
  'onclick': function() {
    alert('Close clicked');
  }
}, {
  'title': 'Hide menu',
  'onclick': function() {
    //put a code to close menu
  }
}];

这是我目前所拥有的，我需要使用上面的数组来更新它以使用该数组。

jQuery

$(document).ready(function() {

$('#menulink').click(function(event) {
    event.preventDefault();
    if($('.navigation-wrapper').hasClass('show-menu')) {
        $('.navigation-wrapper').removeClass('show-menu');
        $('.navigation').hide();
        $('.navigation li').removeClass('small-padding');
    } else {
        $('.navigation-wrapper').addClass('show-menu');
        $('.navigation').fadeIn();
        $('.navigation li').addClass('small-padding');
   }
});

  });

HTML

<a id="menulink" href="#">
    <div class="hamburger-wrapper">
     <div class="inner-hamburger-wrapper">
          <div class="hamburger"></div>
        <div class="hamburger"></div>
        <div class="hamburger"></div>
    </div>
    <div class="menu-title"><p>Menu</p></div>
</div>
</a>

<ul class="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
    <li><a href="#">Menu Item 4</a></li>
    <li><a href="#">Menu Item 5</a></li>
    <li><a href="#">Menu Item 6</a></li>
  </ul>

如果能得到任何帮助，我会很高兴。

Answer 1

使用 jQuery .append()您可以将数组项附加到列表中进行创建。

我们必须单独定位函数，但包含一个解决方案，如果您将 menu[i] 项转换为字符串，您可以将它们内联。

  // Generate an element, append index to referencing the executing function
  $.each(menu, function(index, element) {
    $('ul.navigation').append('<li data-index="'+index+'"><a href="#">'+element.title+'</a></li>');
  });

  // Run the executing function associated with item
  $('ul.navigation > li').click(function() {
    var item = $(this).attr('data-index');
    menu[item].onclick();
  });

  // This could be done easier like so:
  //  $.each(menu, function(index, element) {
  //    $('ul.navigation').append('<li data-index="'+index+'"><a href="#" onclick="'+element.onclick+'">'+element.title+'</a></li>');
  // });
  // but would require modifying the menu[i] items' functions to just be strings

Here's an updated Fiddle.