Question

我有一个手风琴，里面有一些李。在点击特定的li锚标签时，该div的内容应该旁边显示。我已经使用bootstrap col-3作为手风琴，col-9用于显示div。所有div都显示，但我只需显示点击的li的div。可以帮助任何人吗？

$(function() {
  $("#profileAccordion").accordion({
    autoHeight: true
  });
  $("#profileAccordion").accordion({
    collapsible: true
  });
});

#personalInformation,
#changePassword,
#loginHistory,
#addUser {
  //display: none;
}

#personalInformation:focus {
  display: block;
  color: Red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">
  <div class="col-sm-3">
    <div id="profileAccordion">
      <h3>My Profile <i class="fa fa-angle-down pull-right " aria-hidden="true "></i></h3>

      <ol>
        <li><a href="#personalInformation">Personal Information</a></li>
        <li><a href="#changePassword">Change My Password</a></li>
        <li><a href="#loginHistory">Login History</a></li>
        <li><a href="#addUser">Add User</a></li>
      </ol>

      <h3>Everest Settings <i class="fa fa-angle-down pull-right " aria-hidden="true "></i></h3>

      <div>
        <ol>
          <li>My Dashboard</li>
          <li>Language & Time Zone</li>
        </ol>
      </div>
    </div>

  </div>
  <div class="col-sm-9" style="border-left: 1px solid #ccc;">
    <div id="personalInformation">
      <div class="row form-group">
        <div class="col-sm-10">
          <h4>Personal Information</h4>
        </div>
        <div class="col-sm-2 marbot5 pull-right">
          <a class="text-link " ui-sref=" " href="# ">Edit</a>
        </div>
      </div>
      <hr>
      <div class="row ">
        <div class="col-sm-12">

          hello USer

        </div>
      </div>
    </div>
    <div id="personalInformation">
      <div class="row form-group" id="personalInformation">
        <div class="col-sm-10">
          <h4>Add User</h4>
        </div>
      </div>
      <hr>
      <div class="row ">
        <div class="col-sm-12">

          <div class="row form-group">
            <label class="col-sm-3 control-label" for="firstname">Name<span class="mandatory">*</span></label>
            <div class="col-sm-5"> <input class="form-control" placeholder="" /></div>
          </div>
          <div class="row form-group">
            <label class="col-sm-3 control-label" for="firstname">Company</label>
            <div class="col-sm-5"> <input class="form-control" placeholder="" /></div>
          </div>
          <div class="row form-group">
            <label class="col-sm-3 control-label" for="firstname">Title</label>
            <div class="col-sm-5"> <input class="form-control" placeholder="" /></div>
          </div>
          <div class="row form-group">
            <label class="col-sm-3 control-label" for="firstname">E-mail<span class="mandatory">*</span></label>
            <div class="col-sm-5"> <input class="form-control" placeholder="" /></div>
          </div>
          <div class="row form-group">
            <label class="col-sm-3 control-label" for="firstname">Work</label>
            <div class="col-sm-5"> <input class="form-control" value="+1" type="tel" international-phone-number auto-hide-dial-code="false" class="phone" name="phoneCountryCode" ng-model="phone" placeholder="" required></div>
          </div>

          <div class="row form-group">
            <label class="col-sm-3 control-label" for="firstname">Mobile</label>
            <div class="col-sm-5"> <input class="form-control" value="+1" type="tel" international-phone-number auto-hide-dial-code="false" class="phone" name="phoneCountryCode" ng-model="phone" required></div>
          </div>

          <div class="row form-group">
            <label class="col-sm-3 control-label" for="firstname">User Level<span class="mandatory">*</span></label>
            <div class="col-sm-5">
              <select class="form-control placeholder-color ">
                            <option value=" " disabled selected>--Select User Level--</option>     
                            <option value=" ">Super Admin</option>
                            <option value=" ">Executive</option>
                            <option value=" ">Manager</option>
                            <option value=" ">Team Member</option>
                        </select>
              <i class="fa fa-angle-down pull-right " aria-hidden="true "></i></div>
          </div>
        </div>
      </div>
    </div>
    <div id="changePassword">
      <div class="row form-group">
        <div class="col-sm-10">
          <h4>Change Password</h4>
        </div>
      </div>


      <div class="row">

        <div class="col-sm-10">

          <div class="row">
            <div class="col-sm-6 col-md-offset-3">
              <form class="form-horizontal">
                <div class="form-group">
                  <label for="" class="col-sm-4 control-label">Current Password</label>
                  <div class="col-sm-8"><input type="text" class="form-control" id="lastname" placeholder=""></div>
                </div>

                <div class="form-group">
                  <label for="" class="col-sm-4 control-label">New Password</label>
                  <div class="col-sm-8"><input type="text" class="form-control" id="lastname" placeholder=""></div>
                </div>

                <div class="form-group">
                  <label for="" class="col-sm-4 control-label">Confirm Password</label>
                  <div class="col-sm-8"><input type="text" class="form-control" id="lastname" placeholder=""></div>
                </div>


              </form>
            </div>
          </div>

        </div>
      </div>
      <div class="row form-footer">
        <div class="col-md-5 col-md-offset-1"><a href="#" class="btn text-link pull-left">Cancel</a></div>
        <div class="col-md-5"><button type="button" class="btn btn-primary pull-right" ng-click="newpasswordsubmitted()">Save &amp; Update</button></div>
      </div>
      <div class="col-md-12 text-right">
        <a class="btn btn-default" href="# ">Cancel</a> <a class="btn btn-primary" href="# ">Save</a>
      </div>
    </div>

  </div>
</div>

Answer 1

我添加了一个名为＆＃39; mylist＆＃39;你的ol并做了这个;

  $("#mylist > li > a").click(function () {
     var href = $(this).attr('href');
     $(href).fadeToggle();
  });

在这里看到它;

https://jsfiddle.net/hbox25h8/1/

您可能需要稍微改进一下来考虑用户行为。

在同一页面中单击锚标记时显示内容

1 个答案: