Question

到目前为止，我一直试图解决这个问题并没有成功，我不知道jquery所以任何帮助都要受到赞赏。我正在使用bootstrap来构建我的网页，我的侧边栏转到第二个移动菜单，它已经按照我想要的方式显示，我还将活动类成功添加到我的网页中，并且一旦我关闭菜单的功能从列表中选择一个项目，唯一我无法完成的是当我从列表中选择一项运动时，我希望标题范围“Generales”将文本更改为活动链接文本，在这种情况下为“Soccer”或当前活动链接。

我的HTML：

<div class="left-navigation">
  <button class="btn collapse-toggle visible-xs">
    <span class"menuTitle">Generales</span>
  </button>
  <div class="list-group-collapse" id="side-category-menu-collapse">
      <a href="#generales" class="list-group-item active">General</a>
      <a href="#soccer" class="list-group-item">Soccer</a>
      ><a href="#football" class="list-group-item">Football</a> 
      <a href="#baseball" class="list-group-item">Baseball</a> 
  </div>
</div>

活动和折叠菜单的Jquery：

$(document).ready(function() {
  $(".list-group-item").click(function () {
    $(".list-group-item").removeClass("active");
    // $(".tab").addClass("active"); // instead of this do the below 
    $(this).addClass("active");   
  });
});
$(function(){ 
 var navMain = $(".list-group-collapse");
 navMain.on("click", "a:not([data-toggle])", null, function () {
     navMain.collapse('hide');
   });
});

Jquery我试图使用，但我没有运气：

$('.left-navigation a').click(function(){
    console.log('hiding');
    $('.menuTitle').click();
    var title=$(this).find(‘.list-group-item').html();
    console.log(title);
    $('.menuTitle').html(title);
});

以下是我当前菜单的图片以及我要完成的内容：http://imgur.com/a/pxviG

提前抱歉因为英语不是我的第一个语言而出现任何语法错误

Answer 1

$(document).ready(function() {
  $(".list-group-item").click(function () {
    $(".list-group-item").removeClass("active");
    // $(".tab").addClass("active"); // instead of this do the below 
    $(this).addClass("active");   

    $("span:first-child").text($(this).text());
     $("span:first-child").val($(this).text());
  });


});

https://jsfiddle.net/ayang10/DSGxz/1726/

Answer 2

试试这个：

  $(".list-group-item").click(function () {
    $(".list-group-item").removeClass("active");
    // $(".tab").addClass("active"); // instead of this do the below 
    $(this).addClass("active"); 
    $("#selected-menu:first-child").text($(this).text());
   
  });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="left-navigation">
  <button id="selected-menu" class="btn collapse-toggle ">
    <span class"menuTitle">Generales</span>
  </button>
  <div class="list-group-collapse" id="side-category-menu-collapse">
      <a href="#generales" class="list-group-item active">General</a>
      <a href="#soccer" class="list-group-item">Soccer</a>
      <a href="#football" class="list-group-item">Football</a> 
      <a href="#baseball" class="list-group-item">Baseball</a> 
  </div>
</div>

Answer 3

使用：$(this).text()获取链接文字。

所以：

$(‘.left-navigation a').click(function(){
    console.log('hiding');
    $('.menuTitle').click();
    var title=$(this).text();
    console.log(title);
    $('.menuTitle').html(title);
});

使用活动链接文本更改范围文本

3 个答案: