链接文本替换为列表文本

Question

在这个给定的例子中，我需要＆＃34;选择答案＆＃34;文本应替换为单击列表，例如。如果我点击＆＃34;选择答案1＆＃34;它应该替换为＆＃34;我。桥＆＃34 ;.

＆＃13;

＆＃13;

.table-bordered{
  border:none;
}

＆＃13;

$('.sbSelector').click(function() {
  var $this = $(this).closest('.sbHolder').find('.sbOptions');
  $('.sbOptions').not($this).slideUp();
  $this.slideToggle('slow');
});

＆＃13;

.sbSelector {
  display: block;
  border: 1px solid gray;
  padding: 5px 15px;
  margin-bottom: 15px;
  text-decoration: none;
}
.sbOptions {
  display: none;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

将 click() 事件处理程序绑定到列表项，并根据点击的列表项更新内容。

.sbSelector {
  display: block;
  border: 1px solid gray;
  padding: 5px 15px;
  margin-bottom: 15px;
  text-decoration: none;
}
.sbOptions {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sbHolder">
  <a href="#" class="sbSelector">Choose answer 1</a>
  <ul class="sbOptions">
    <li><a href="#">Choose answer 1</a>
    </li>
    <li><a href="#">I. Bridge</a>
    </li>
    <li><a href="#">II. Nut</a>
    </li>
    <li><a href="#">III. Neck</a>
    </li>
  </ul>
</div>

<div class="sbHolder">
  <a href="#" class="sbSelector">Choose answer 2</a>
  <ul class="sbOptions">
    <li><a href="#">Choose answer 2</a>
    </li>
    <li><a href="#">I. Bridge</a>
    </li>
    <li><a href="#">II. Nut</a>
    </li>
    <li><a href="#">III. Neck</a>
    </li>
  </ul>
</div>

<div class="sbHolder">
  <a href="#" class="sbSelector">Choose answer 3</a>
  <ul class="sbOptions">
    <li><a href="#">Choose answer 3</a>
    </li>
    <li><a href="#">I. Bridge</a>
    </li>
    <li><a href="#">II. Nut</a>
    </li>
    <li><a href="#">III. Neck</a>
    </li>
  </ul>
</div>

{{1}}