如何使用jQuery进行BOX下拉列表？

Question

我甚至不确定这种类型的下拉调用是什么。但是我希望有人知道它使用的是哪个包/模板。谢谢你的帮助！

黛安娜

Answer 1

这不是tab view，<a>

在li

中有一个表格而不是$(document).ready(function() { $('.dropdown').hover( function() { $(this).children('.sub-menu').slideDown(200); }, function() { $(this).children('.sub-menu').slideUp(200); } ); }); // end ready个标记down menu

See for your self IT 下拉菜单

nav {
  background-color: rgb(255, 100, 100);
  padding: 10px 0;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
  position: relative;
}
/* sub navigation */

nav li ul {
  background-color: rgb(225, 75, 75);
  position: absolute;
  left: 0;
  top: 40px;
  /* make this equal to the line-height of the links (specified below) */
  width: 200px;
}
nav li li {
  position: relative;
  margin: 0;
  display: block;
}
nav li li ul {
  position: absolute;
  top: 0;
  left: 200px;
  /* make this equal to the width of the sub nav above */
  margin: 0;
}
/* style all links */

nav a {
  line-height: 40px;
  padding: 0 12px;
  margin: 0 12px;
}
nav a {
  color: #fff;
  text-decoration: none;
  display: block;
}
nav a:hover,
nav a:focus,
nav a:active {
  color: rgb(50, 50, 50);
}
/* style sub level links */

nav li li a {
  border-bottom: solid 1px rgb(200, 50, 50);
  margin: 0 10px;
  padding: 0;
}
nav li li:last-child a {
  border-bottom: none;
}
/* show arrows for dropdowns */

nav li.dropdown > a {
  background-image: url('../img/arrow-down.png');
  background-position: right 20px;
  background-repeat: no-repeat;
}
nav li li.dropdown > a {
  background-image: url('../img/arrow-right.png');
  background-position: right 16px;
  background-repeat: no-repeat;
}
/* hide sub menu links */

ul.sub-menu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav>
  <ul>
    <li><a href="#">Nav 1</a>
    </li>
    <li><a href="#">Nav 2</a>
    </li>
    <li class="dropdown">
      <a href="#">Nav 3 <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
      <ul class="sub-menu">
        <li>
          <table class="table">
            <thead>
              <tr>
                <th>Header 1</th>
                <th>Header 2</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><a href="#">Data 1</a>
                </td>
                <td><a href="#">Data 2</a></td>
              </tr>
              <tr>
                <td><a href="#">Data 3</a>
                </td>
                <td><a href="#">Data 4</a></td>
              </tr>
            </tbody>
          </table>

        </li>
      </ul>
    </li>
  </ul>
</nav>
<div class="container">
  Then you have you main body content here and the nav bar above with the drop should look good.
</div>

  public function testCreate()
  {
      $clientManager = $this->client->getContainer()->get('fos_oauth_server.client_manager.default');
      $client = $clientManager->createClient();
      $client->setRedirectUris(array('http://www.example.com'));
      $client->setAllowedGrantTypes(array('token', 'authorization_code', 'password'));
      $clientManager->updateClient($client);
      $crawler = $this->client->request(
                       'POST',
                       '/oauth/v2/token',
                       array(),
                       array(),
                       array('CONTENT_TYPE' => 'application/json'),
                       '{
                         "grant_type":"password",
                         "client_id":"' . $client->getId() . '_' . $client->getRandomId() . '",
                         "client_secret":"' . $client->getSecret() . '",
                         "username": "Alvaro",
                         "password": "1231251265"
                        }'
                       );
      $this->assertEquals(200, $this->client->getResponse()->getStatusCode());
      $response = json_decode($this->client->getResponse()->getContent(), true);
      $this->assertTrue( strlen($response['access_token']) > 10 );
      $this->assertEquals( 'bearer', $response['token_type'] );
      $this->assertTrue( strlen($response['refresh_token']) > 10 );
      $this->assertEquals( 3600, $response['expires_in'] );
      $crawler = $this->client->request(
                                        'GET',
                                        '/businesses', //@TODO: Move this to a common route
                                        array(),
                                        array(),
                                        array('CONTENT_TYPE' => 'application/json'));
      $this->assertEquals(401, $this->client->getResponse()->getStatusCode());
      $crawler = $this->client->request(
                                        'GET',
                                        '/businesses', //@TODO: Move this to a common route
                                        array(),
                                        array(),
                                        array('CONTENT_TYPE' => 'application/json', 'Authorization:Bearer' => $response['access_token']));
      $this->assertEquals(200, $this->client->getResponse()->getStatusCode()); <-- failing assertion