jQuery改变菜单的文本

Question

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

我希望这个菜单在 jquery 中具有以下功能。当我单击一个菜单项时，我希望它从“1”更改其文本。到“标题 1”并保持扩展。当我按下另一个菜单时，前一个菜单应该返回它的默认状态（小宽度和“1.”作为文本），新的菜单应该从“2”展开和更改文本。到“标题 2”。我怎样才能实现它。

这是我用于幻灯片功能的 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/

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

Answer 1

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

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

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