Question

$(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，因为我打算在其中调用自定义菜单。我将多次使用此代码段并调用多个菜单以触发切换。

Answer 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，在请求时添加navmenus：

$(".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

在JavaScript切换中添加html / css

1 个答案: