Question

for placeholder, replacement in enumerate(('VAR1', 'VAR2'), rndvar):
    x = x.replace(placeholder, replacement)

当我点击图标时，它应该在#quickview中显示列表。当我点击图标时，它会转到#quickview，但它不会切换列表。

Answer 1

我可能会遗漏一些东西--jQuery只是没有显示ul？

如果是这样，我认为这是因为您的定位不正确。

$(function(){
    $('#quickview').click(function(){
        $(this).find('ul').toggle();
    });
});

Answer 2

从您不完整的示例中，我推断您尝试使用Bootstrap v4从下拉列表元素控制选项卡式部分显示。

首先，我必须从可用性的角度警告你这是一个糟糕的主意（大多数用户不会理解这是一个标签区域，永远不会看到隐藏的内容标签，因为他们不会打开下拉列表。

为了使其有效，您不需要任何自定义JavaScript，只要您注意其标记，它就已经由Bootstrap提供了：

＆＃13;

head + body {
  background-color: #f8f8f8;
}
.tab-content {
  background-color: white;
  border: solid #ddd;
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<div class="container">
  <div class="row mt-3">
    <div class="col">
      <ul class="nav nav-tabs">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Select section</a>
          <div class="dropdown-menu">
            <a class="dropdown-item active" href="#one" id="tab-1" data-toggle="tab" role="tab" aria-controls="one" aria-selected="false">Section 1</a>
            <a class="dropdown-item" href="#two" id="tab-2" data-toggle="tab" href="#two" role="tab" aria-controls="twp" aria-selected="false">Section 2</a>
            <a class="dropdown-item" href="#three" id="tab-3" data-toggle="tab" href="#three" role="tab" aria-controls="three" aria-selected="false">Section 3</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#last" id="tab-4" data-toggle="tab" href="#last" role="tab" aria-controls="last" aria-selected="false">Last section</a>
          </div>
        </li>
      </ul>
    </div>
  </div>


  <div class="tab-content p-3">
    <div class="tab-pane fade show active" id="one" role="tabpanel" aria-labelledby="tab-1">
      <p class="lead">Section 1
      <p>Lorem ipsum dolor amet actually selfies iPhone, kinfolk polaroid cold-pressed direct trade pug umami bitters. Direct trade readymade viral, occupy fingerstache pickled actually wayfarers waistcoat whatever succulents. Pinterest mlkshk hell of brooklyn typewriter glossier farm-to-table occupy hoodie edison bulb. Trust fund truffaut pickled fixie, single-origin coffee tumeric cardigan gluten-free schlitz. Ugh quinoa single-origin coffee, ethical waistcoat art party biodiesel activated charcoal.
      </div>
    <div class="tab-pane fade" id="two" role="tabpanel" aria-labelledby="tab-2">
    <p class="lead">Section 2
    <p>Listicle umami neutra, keytar man braid copper mug try-hard thundercats trust fund mixtape fanny pack. 90's you probably haven't heard of them tofu, tumblr umami stumptown freegan kickstarter typewriter keytar. Franzen food truck prism vice. Fashion axe fanny pack food truck flannel thundercats, subway tile XOXO kogi next level air plant pok pok. Tumblr marfa tumeric, four loko sriracha direct trade lumbersexual flexitarian vape selvage.
    </div>
    <div class="tab-pane fade" id="three" role="tabpanel" aria-labelledby="tab-3">
    <p class="lead">Section 3
    <p>Af XOXO biodiesel succulents live-edge fashion axe paleo poutine. Street art jianbing 8-bit echo park unicorn trust fund plaid austin lyft actually. Hella tacos selfies, twee normcore locavore coloring book banh mi. Farm-to-table pinterest gentrify glossier whatever enamel pin intelligentsia sustainable green juice selvage readymade.
    </div>
    <div class="tab-pane fade" id="last" role="tabpanel" aria-labelledby="tab-4">
    <p class="lead">Last Section
    <p>Oh. You need a little dummy text for your mockup? How quaint.
    <p>I bet you’re still using Bootstrap too…
    </div>
  </div>
</div>

＆＃13;

注意：我添加的CSS纯粹是装饰性的，您不需要它来使示例工作。

在jquery中下拉列表

2 个答案: