0 
$(function() {
$('#toggle3').click(function () {
    $('.toggle').hide('1000');
    $('.toggle').text('I would like to add a navigation menu here'); // <--
$('.toggle').slideToggle('1000');

return false; 
    });
});

我想知道编辑上述代码片段以便能够保存 HTML/CSS 的最佳方法，因为我计划在其中调用自定义菜单。我将多次使用这个片段并调用多个菜单来触发切换。

4

1 回答 1

1

如果可能的话，尽量避免在 javascript 中嵌入 html：您可能会遇到转义问题和多行字符串，并且总体结果通常并不漂亮。

您可能希望将 HTML 存储在 DOM 本身上：

<div>
  <span class="toggle" data-toggle="foo">Toggle foo</span>
  <span class="toggle" data-toggle="bar">Toggle bar</span>
</div>

<div id="navmenu-store">
  <div class='navmenu' data-for-toggle="foo">
    navmenu "foo"
  </div>

  <div class='navmenu' data-for-toggle="bar">
    navmenu "bar"
  </div>
</div>

在 CSS 上，隐藏“商店”：

#navmenu-store {
  display: none;
}

然后，使用 javascript，在请求时添加导航菜单：

$(".toggle").each(function() {
  var $toggle = $(this);
  var toggleName = $toggle.data("toggle");  
  var $navmenu = $(".navmenu[data-for-toggle=" + toggleName + "]");

  // Store the navmenu on the toggle for later access
  $navmenu.remove();
  $toggle.data("navmenu", $navmenu);
});

$(".toggle").on("click", function() {
  var $toggle = $(this);
  var $navmenu = $toggle.data("navmenu");

  var isInTheDom = $.contains(document, $navmenu[0]);

  if(isInTheDom) {
    $navmenu.remove();
  } else {
    // Here I'm inserting the navmenu after the toggle;
    // you can do whatever you want
    $navmenu.insertAfter($toggle);
  }
});

我创建了一个非常简单的 jsbin 作为概念证明：http: //jsbin.com/OwUWAlu/1/edit

于 2013-11-09T00:16:04.287 回答