在JavaScript切换中添加html/css $（函数（）{ $（'#toggle3'）。单击（函数（）{ $（'.toggle'）.hide（'1000'）； $（'.toggle'）.text（'我想在这里添加一个导航菜单'）；//

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

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

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

return false; 
    });
});

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

<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>

---

我创建了一个非常简单的jsbin作为概念证明：

您可以使用html，而不是文本谢谢！但是，嘿，使用简单的html确实有效；但是添加内容菜单最有意义吗？比如这么多代码？！

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