Question

我有jQuery Slick Gallery，里面有一个Dropdown菜单。按钮显示当前选择的条目，菜单条目是单击按钮时显示的无序列表。

无序列表隐藏在底部边缘，但应显示在点的上方。您也可以在下面的图片中看到问题：

我尝试做的一个例子，你可以在这里找到：http://jsfiddle.net/45cst6nq/

HTML

<section class="slider">
  <div>
    <ul class="list">
      <li>Please select</li>
      <li>Point 1</li>
      <li>Point 2</li>
      <li>Point 3</li>
      <li>Point 4</li>
      <li>Point 5</li>
      <li>Point 6</li>
      <li>Point 7</li>
      <li>Point 8</li>
      <li>Point 9</li>
      <li>Point 10</li>
    </ul>
  </div>
  <div>slide2</div>
  <div>slide3</div>
  <div>slide4</div>
  <div>slide5</div>
  <div>slide6</div>
</section>

CSS

$c1: #3a8999;
$c2: #e84a69;

.slider {
    width: auto;
    margin: 30px 50px 50px;
}

.slick-slide {
    background: $c1;
    color: white;
    padding: 40px 0;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}

.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-dots {
    bottom: -30px;
}

.slick-slide:nth-child(odd) {
     background: $c2;
}

.list {
  position: absolute;
  top: 0;
}

JS

$(".slider").slick({
    autoplay: false,
    dots: true,
    responsive: [{ 
        breakpoint: 500,
        settings: {
            dots: false,
            arrows: false,
            infinite: false,
            slidesToShow: 2,
            slidesToScroll: 2
        } 
    }]
});

这是一个简单的例子来证明这个问题。我在我的定制项目中展示的组件有点复杂。

我已经尝试通过更改z-index和溢出来解决这个问题。当我将overflow-x设置为可见时，看起来它正在工作，但克隆的幻灯片也可见。使用overflow-y: visible;不起作用。为什么只有overflow-x: visible显示列表正确重叠，但overflow-y: visible;没有？对我来说这没有意义。

有可能解决这个问题吗？我喜欢这个光滑的画廊，不想为这个案子写我自己的。

Answer 1

我不确定我理解你想要达到的目标。

无序列表不能是下拉列表，即html选择元素。我分叉你的小提琴，用了一个选择而不是ul，一切看起来都不错。

https://jsfiddle.net/o1prjfcw/2/

<section class="slider">
    <div>
      <select>
        <option value="point1">Point 1</option>
        <option value="point2">Point 2</option>
        <option value="point3">Point 3</option>
        <option value="point4">Point 4</option>
      </select>
    </div>
    <div>slide2</div>
...

显然，您可以将选择元素设置为适合页面其余部分的内容。

Answer 2

错误发生在类slick.list中。我为你的Li元素添加了一些颜色，以显示它更清晰。添加此项，您将看到它们：

docker run --privileged --name stg-selenium-client --rm=true --link zalenium:hub hub.platformservices.io/sbg_core_automation/core-test-runner-with-maven-dependencies:0.12 <command to execute tests>

预览：http://jsfiddle.net/62sdgv5a/

Answer 3

你的问题不是很明确，你想要实现什么，但如果你试图将列表元素放入滑块，我建议你将这段代码添加到你的CSS中。

.slider div .list{
  position: relative;
}

这允许列表显示在幻灯片中。这不会影响其他幻灯片。

Answer 4

Demo

您可以使用Html select元素并根据需要进行自定义。

HTML：

<div class="search_categories">
<div class="select">
   <select name="search_categories" id="search_categories">
     <option value="point1">Please select</option>
    <option value="point1">Point 1</option>
    <option value="point2">Point 2</option>
    <option value="point3">Point 3</option>
    <option value="point4">Point 4</option>
    <option value="point3">Point 5</option>
    <option value="point4">Point 6</option>
    <option value="point3">Point 7</option>
    <option value="point4">Point 8</option>
    <option value="point3">Point 9</option>
    <option value="point4">Point 10</option>
  </select>
  </div>
  </div>

CSS：

    .search_categories{
  background:transparent;
  position: relative;
}
.search_categories .select select{
  -webkit-appearance: none;
  -moz-appearance: none;
  line-height: 1;
  border:0px;
   outline:0px;
  padding: 0;
  border-radius: 0;
  position: relative;
  font-size: 1em;
  background:transparent;
  color:white;
}

下拉菜单与Slick Gallery不重叠

4 个答案: