Question

我设法创建了一个粘滞的垂直菜单，当使用css过渡悬停时会扩展。我还添加了功能，以便在单击时滑动到锚点。

我希望此菜单具有jquery的以下功能。当我点击菜单项时，我希望它从＆＃34; 1更改其文本。＆＃34;到＆＃34;标题1＆＃34;并保持扩大。当我按下另一个菜单时，前一个菜单应该返回它的默认状态（小宽度和＆＃34; 1。＆＃34;作为文本）和新的菜单，以便从let＆＃39; s中扩展和更改文本说＆＃34; 2。＆＃34;到＆＃34;标题2＆＃34;。我怎样才能实现它。

这是我用于幻灯片功能的jQuery。

$(function() {
  $('.slider a').bind('click', function(event) {
  var $anchor = $(this);

  $('html, body').stop().animate({
     scrollTop: $($anchor.attr('href')).offset().top
  }, 1000);

  event.preventDefault();
  });
});

这是我的小提琴。 https://jsfiddle.net/mosmic/319d4bcL/

如果小提琴似乎不起作用，只需展开浏览器窗口。

Answer 1

我会像这样使用data-属性。

<a href="#section1" data-shortname="1." data-longname="title 1">
    <div class="number">1.</div>
</a>

检查您的更新小提琴https://jsfiddle.net/319d4bcL/7/

jQuery来改变菜单的文本

1 个答案: