Question

我有这个设置JSFiddle 我需要点击Points下的Button 2（Point 3，Point 4），而不是Button 2下显示的Button 1。

我如何做到这一点？

var myButton = document.getElementById("myButton");
var dropdDown = document.getElementById("dropdown");

(function() {

  "use strict";

  dropdownExpander(myButton, dropdDown);

  function dropdownExpander(bdropdown, dContent) {
    bdropdown.addEventListener("click", function(e) {
      e.preventDefault();
      if (dContent.classList.contains("is-active") === true) {
        dContent.classList.remove("is-active");

      } else {
        dContent.classList.add("is-active");
      }
    });
  }

})();


var myButton = document.getElementById("myButton2");
var dropdDown = document.getElementById("dropdown2");

(function() {

  "use strict";

  dropdownExpander(myButton, dropdDown);

  function dropdownExpander(bdropdown, dContent) {
    bdropdown.addEventListener("click", function(e) {
      e.preventDefault();
      if (dContent.classList.contains("is-active") === true) {
        dContent.classList.remove("is-active");

      } else {
        dContent.classList.add("is-active");
      }
    });
  }

})();

.parentDiv {
  display: inline-blick;
}
#myButton {
  padding: 5px;
}
.childDiv {
  display: none;
  position: absolute;
  padding-right: 5px;
}
.childDiv.is-active {
  display: block;
}

<div class="parentDiv">
  <button type="button" id="myButton">Button 1</button>
  <div class="childDiv" , id="dropdown">
    <div class="cont">Point 1</div>
    <div class="cont">Point 2</div>
  </div>

  <button type="button" id="myButton2">Button 2</button>
  <div class="childDiv" , id="dropdown2">
    <div class="cont">Point 3</div>
    <div class="cont">Point 4</div>
  </div>
</div>

Answer 1

使用此代码

2nd video

Answer 2

在extension NSImage { var base64String:String? { guard let rep = NSBitmapImageRep( bitmapDataPlanes: nil, pixelsWide: Int(size.width), pixelsHigh: Int(size.height), bitsPerSample: 8, samplesPerPixel: 4, hasAlpha: true, isPlanar: false, colorSpaceName: NSDeviceRGBColorSpace, bytesPerRow: 0, bitsPerPixel: 0 ) else { print("Couldn't create bitmap representation") return nil } NSGraphicsContext.saveGraphicsState() NSGraphicsContext.setCurrent(NSGraphicsContext(bitmapImageRep: rep)) draw(at: NSZeroPoint, from: NSZeroRect, operation: .sourceOver, fraction: 1.0) NSGraphicsContext.restoreGraphicsState() guard let data = rep.representation(using: NSBitmapImageFileType.PNG, properties: [NSImageCompressionFactor: 1.0]) else { print("Couldn't create PNG") return nil } return data.base64EncodedString(options: []) } }中包含每个按钮+下拉列表。
更正了.parentDiv。
添加了inline-blick

<强> HTML：

position: relative;

<强> CSS：

<div class="parentDiv">
  <button type="button" id="myButton">Button 1</button>
  <div class="childDiv" , id="dropdown">
    <div class="cont"> Point 1</div>
    <div class="cont"> Point 2</div>
  </div>
</div>
<div class="parentDiv">
  <button type="button" id="myButton2">Button 2</button>
  <div class="childDiv" , id="dropdown2">
    <div class="cont"> Point 3</div>
    <div class="cont"> Point 4</div>
  </div>
</div>

JSFiddle

Answer 3

这是一个使用flexbox进行布局的解决方案：

codepen：http://codepen.io/anon/pen/LRLQoV

<div class="flex-container">
  <div class='flex-column'>
    <button type="button" id="button1">Button 1</button>
    <div class="childDiv hidden" , id="dropdown1">
      <div class="cont"> Point 1</div>
      <div class="cont"> Point 2</div>
    </div>
  </div>

  <div class='flex-column'>
    <button type="button" id="button2">Button 2</button>
    <div class="childDiv" id="dropdown2">
      <div class="cont"> Point 3</div>
      <div class="cont"> Point 4</div>
    </div>
  </div>
  <button id='reset'>Reset</button>
</div>

的CSS：

.flex-container {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hidden {
  display: none;
}

#reset {
 margin-left: auto;
  color: white;
  background: red;
}

的javascript：

(() => {
  const button1 = document.getElementById('button1');
  const button2 = document.getElementById('button2');
  const element1 = document.getElementById('dropdown1');
  const element2 = document.getElementById('dropdown2');
  const resetButton = document.getElementById('reset');

  button1.onclick = () => {
    element1.classList.remove('hidden');
  }

  button2.onclick = () => {
    element2.classList.remove('hidden');
  }

  resetButton.onclick = () => {
    element1.classList.add('hidden');
    element2.classList.add('hidden');
  }

})();

Answer 4

使用HTML <table>

<table>
<tr>
    <td>
          <button type="button" id = "myButton">Button 1</button>
          <div class = "childDiv", id = "dropdown"> 
              <div class = "cont"> Point 1</div>
              <div class = "cont"> Point 2</div>
          </div>
   </td>
   <td>
          <button type="button" id = "myButton2">Button 2</button>
          <div class = "childDiv", id = "dropdown2"> 
              <div class = "cont"> Point 3</div>
              <div class = "cont"> Point 4</div>
          </div>
  </td>
</tr>
</table>

在按钮下垂直对齐div的内容

4 个答案: