如何通过CSS或jQuery将目标<div>与另一个目标更改

时间：2019-06-06 02:01:09

标签： jquery css

我有一个页面可以显示数百行数据。每行数据可以有1到9个选项。单击任何一个“选项”将向下滑动div并显示该行/选项的2种可能的操作。我正计划将AJAX函数用于这些操作。

现在，为了进行测试，我有一个黄色的可见div调用.here，我想将其隐藏。单击该选项后，.here将以我的操作打开，而不是当前打开的<div>。它会在选项下直接打开，看起来很糟糕。我知道这就是我的HTML / CSS的结构，但是我不知道其他任何方式。任何解决方案，无论是HTML / CSS还是jQuery，都将不胜感激。

$(document).ready(function() {

  $(".dropdown-link").click(function(e) {
    e.preventDefault();

    var $div = $(this).next('.dropdown-container');

    $(".dropdown-container").not($div).slideUp("slow");
    if ($div.is(":visible")) {
      $div.slideToggle("slow");
    } else {
      $div.slideDown("slow");
    }
  });

  $(document).click(function(e) {
    var p = $(e.target).closest('.dropdown').length

    if (!p) {
      $(".dropdown-container").hide();
    }
  });

});
.bind_Area {
  margin: 5px;
  padding: 7px 5px;
  text-align: left;
  font-weight: 700;
  font-size: 0.875em;
  border-radius: 4px;
  border: 1px solid #666666;
  background-color: #2E2E2E;
}

.bind_Name {
  display: flex;
}

.dropdown {
  display: block;
  padding: 2px 5px;
  border: 1px solid red;
  flex-flow: column wrap;
}

.dropdown-link {
  display: inline-flex;
  margin: 0px 5px;
  cursor: pointer;
  padding: 3px 10px;
  text-decoration: none;
  border-radius: 4px;
  background: repeat-x center center #000000;
  box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  color: #CCFF66;
}

.dropdown-container {
  margin-top: 5px;
  margin-left: 0px;
  display: none;
  background-color: gray;
}

.here {
  xdisplay: none;
  margin-top: 5px;
  height: 25px;
  border: 1px solid blue;
  background-color: yellow;
  width: 85%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div lass="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <div class="dropdown-link" href="#">OPTION 00</div>
      <div class="dropdown-container">
        <div>
          <div>Proceed</div>
          <br>
          <div>Cancel</div>
        </div>
      </div>
    </div>
    <br>
    <div class="dropdown">
      <div class="dropdown-link" href="#">OPTION 01</div>
      <div class="dropdown-container">
        <div>
          <div>Proceed</div>
          <br>
          <div>Cancel</div>
        </div>
      </div>
    </div>
    <br>
    <div class="dropdown">
      <div class="dropdown-link" href="#">OPTION 02</div>
      <div class="dropdown-container">
        <div>
          <div>Proceed</div>
          <br>
          <div>Cancel</div>
        </div>
      </div>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here">
  </div>
</div>
<!-- end of #bind_Area -->
<br>
<br>
<div lass="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <div class="dropdown-link" href="#">OPTION 00</div>
      <div class="dropdown-container" style="display: none;">
        <div>
          <div>Proceed</div>
          <br>
          <div>Cancel</div>
        </div>
      </div>
    </div>
    <br>
    <div class="dropdown">
      <div class="dropdown-link" href="#">OPTION 01</div>
      <div class="dropdown-container">
        <div>
          <div>Proceed</div>
          <br>
          <div>Cancel</div>
        </div>
      </div>
    </div>
    <br>
    <div class="dropdown">
      <div class="dropdown-link" href="#">OPTION 02</div>
      <div class="dropdown-container">
        <div>
          <div>Proceed</div>
          <br>
          <div>Cancel</div>
        </div>
      </div>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here">
  </div>
</div>
<!-- end of #bind_Area -->

View on CodePen

2 个答案:

答案 0 :(得分：3)

我建议使用jQuery的closest()查找最接近的.bind_Area祖先，然后在该祖先元素中找到.here元素。我还建议使用data attributes来确定哪个选项在特定选项区域中处于活动状态。

这是一个示范：

$(function() {

  var $allHeres = $('.here');

  $(".dropdown-link").click(function(e) {
    e.preventDefault();

    var $this = $(this);
    var $thisHere = $this.closest('.bind_Area').find('.here');
    var thisOption = $this.data('option');

    // close all that are not this one
    $allHeres.not($thisHere).slideUp("slow");

    // if this option area isnt set to this option...
    if ($thisHere.data('option') != thisOption) {

      // show this option area
      $thisHere.slideDown('slow');

      // set option area to current option
      $thisHere.data('option', thisOption);
      $thisHere.text(thisOption);

    } else {

      // toggle this option area
      $thisHere.slideToggle('slow');

    }

  });

});
.bind_Area {
  margin: 5px;
  padding: 7px 5px;
  text-align: left;
  font-weight: 700;
  font-size: 0.875em;
  border-radius: 4px;
  border: 1px solid #666666;
  background-color: #2E2E2E;
}

.bind_Name {
  display: flex;
}

.dropdown {
  display: block;
  padding: 2px 5px;
  border: 1px solid red;
  flex-flow: column wrap;
}

.dropdown-link {
  display: inline-flex;
  margin: 0px 5px;
  cursor: pointer;
  padding: 3px 10px;
  text-decoration: none;
  border-radius: 4px;
  background: repeat-x center center #000000;
  box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  color: #CCFF66;
}

.dropdown-container {
  margin-top: 5px;
  margin-left: 0px;
  display: none;
  background-color: gray;
}

.here {
  display: none;
  margin-top: 5px;
  height: 25px;
  border: 1px solid blue;
  background-color: yellow;
  width: 85%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="0">OPTION 00</div>
    </div>
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="1">OPTION 01</div>
    </div>
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="2">OPTION 02</div>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here"></div>
</div>
<!-- end of #bind_Area -->
<div class="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="0">OPTION 00</div>
    </div>
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="1">OPTION 01</div>
    </div>
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="2">OPTION 02</div>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here"></div>
</div>
<!-- end of #bind_Area -->

根据您在选项区域中想要的行为，单击各种选项时，可能需要更改其HTML和/或绑定到其内容的事件。

此外，您的代码中似乎还有一个错字：

<div lass="bind_Area">

应为：

<div class="bind_Area">

编辑

这是一个在选择其他选项时可以上下滑动的版本。
我还使其突出显示了所选的选项，仅用于踢球。

$(function() {

  var speed = 'fast';
  var $allHeres = $('.here');
  var $dropLinks = $('.dropdown-link');

  $dropLinks.click(function(e) {
    e.preventDefault();

    var $this = $(this);
    var $thisHere = $this.closest('.bind_Area').find('.here');
    var thisOption = $this.data('option');

    // deselect links
    $dropLinks.removeClass('selected');

    // close all option areas
    $allHeres.slideUp(speed);

    // if this option area isnt set to this option...
    if ($thisHere.data('option') != thisOption) {

      // select this link
      $this.addClass('selected');

      // set option area to the current option
      $thisHere.data('option', thisOption);

      // slide option area up
      $thisHere.stop(true, false).slideUp(speed, function() {
        // set option area text and slide it down
        $thisHere.text(thisOption);
        $thisHere.slideDown(speed);
      });

    } else {

      // toggle this option and its area
      $this.toggleClass('selected', $thisHere.is(':hidden'));
      $thisHere.stop(true, false).slideToggle(speed);

    }

  });

});
.bind_Area {
  margin: 5px;
  padding: 7px 5px;
  text-align: left;
  font-weight: 700;
  font-size: 0.875em;
  border-radius: 4px;
  border: 1px solid #666666;
  background-color: #2E2E2E;
}

.bind_Name {
  display: flex;
}

.dropdown {
  display: block;
  padding: 2px 5px;
  border: 1px solid red;
  flex-flow: column wrap;
}

.dropdown-link {
  display: inline-flex;
  margin: 0px 5px;
  cursor: pointer;
  padding: 3px 10px;
  text-decoration: none;
  border-radius: 4px;
  background: repeat-x center center #000000;
  box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  color: #CCFF66;
}

.dropdown-link.selected {
  background-color: #555;
  color: white;
}

.dropdown-container {
  margin-top: 5px;
  margin-left: 0px;
  display: none;
  background-color: gray;
}

.here {
  display: none;
  margin-top: 5px;
  height: 25px;
  border: 1px solid blue;
  background-color: yellow;
  width: 85%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="0">OPTION 00</div>
    </div>
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="1">OPTION 01</div>
    </div>
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="2">OPTION 02</div>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here"></div>
</div>
<!-- end of #bind_Area -->
<div class="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="0">OPTION 00</div>
    </div>
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="1">OPTION 01</div>
    </div>
    <div class="dropdown">
      <div class="dropdown-link" href="#" data-option="2">OPTION 02</div>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here"></div>
</div>
<!-- end of #bind_Area -->

答案 1 :(得分：1)

您已经有了一个很好的答案，但是我将给您一些替代方案和一些思考的方法。

首先让我们做些语义化。实际上，您具有指向页面另一部分的链接，因此，请使用<a>标签，并将href设置为页面部分。此选项没有javascript，功能完善，可以根据需要使用一些javascript / jquery进行增强。

.bind_Area {
  margin: 5px;
  padding: 7px 5px;
  text-align: left;
  font-weight: 700;
  font-size: 0.875em;
  border-radius: 4px;
  border: 1px solid #666666;
  background-color: #2E2E2E;
}

.bind_Name {
  display: flex;
}

.dropdown {
  display: block;
  padding: 2px 5px;
  border: 1px solid red;
  flex-flow: column wrap;
}

.dropdown-link {
  display: inline-flex;
  margin: 0px 5px;
  cursor: pointer;
  padding: 3px 10px;
  text-decoration: none;
  border-radius: 4px;
  background: repeat-x center center #000000;
  box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  color: #CCFF66;
}


.dropdown-container {
  margin-top: 5px;
  margin-left: 0px;
  background-color: gray;
  display: none;
  overflow: hidden;
  margin: 5px;
}

.dropdown-container:target {
  max-height: 1000px;
  display: block;
}

.here {
  position: relative;
  /*Children will be postioned relative to this */
  margin-top: 5px;
  border: 1px solid blue;
  background-color: yellow;
  width: 85%;
  min-height: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div lass="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <a class="dropdown-link" href="#option00">OPTION 00</a>
    </div>
    <div class="dropdown">
      <a class="dropdown-link" href="#option01">OPTION 01</a>
    </div>
    <div class="dropdown">
      <a class="dropdown-link" href="#option02">OPTION 02</a>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here">
    <div class="dropdown-container" id="option00">
      <fieldset>
        <legend>Option 00</legend>
        <div>Proceed</div>
        <div>Cancel</div>
      </fieldset>
    </div>

    <div class="dropdown-container" id="option01">
      <fieldset>
        <legend>Option 01</legend>
        <div>Proceed</div>
        <div>Cancel</div>
      </fieldset>
    </div>
    <div class="dropdown-container" id="option02">
      <fieldset>
        <legend>Option 02</legend>
        <div>Proceed</div>
        <div>Cancel</div>
      </fieldset>
    </div>
  </div>
</div>
<!-- end of #bind_Area -->
<br>
<br>
<div lass="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <a class="dropdown-link" href="#option10">OPTION 00</a>
    </div>
    <div class="dropdown">
      <a class="dropdown-link" href="#option11">OPTION 01</a>
    </div>
    <div class="dropdown">
      <a class="dropdown-link" href="#option12">OPTION 02</a>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here">
    <div class="dropdown-container" id="option10">
      <fieldset>
        <legend>Option 10</legend>
        <div>Proceed</div>
        <div>Cancel</div>
      </fieldset>
    </div>
    <div class="dropdown-container" id="option11">
      <fieldset>
        <legend>Option 11</legend>
        <div>Proceed</div>
        <div>Cancel</div>
      </fieldset>
    </div>
    <div class="dropdown-container" id="option12">
      <fieldset>
        <legend>Option 12</legend>
        <div>Proceed</div>
        <div>Cancel</div>
      </fieldset>
    </div>
  </div>
</div>
<!-- end of #bind_Area -->

现在让我们对其进行一些优化。实际上，您可能不需要为每个选项设置一组按钮。您只需要一种将信息传递给ajax的方法。我将在此处使用可见的表单字段，以便您可以看到它，但是您可以轻松地使用隐藏字段或AJAX调用要查看的数据属性。因此，在此版本中，每个“行”都会有一组操作

$(document).ready(function(){
  $(".dropdown-link").on("click", function(){
    const tranSpeed = "slow";
    //OPTIONAL - hide all dropdown containers
   // $(".dropdown-container").hide(tranSpeed);
    //Get clicked option
    var selOption = $(this).data("selectedoption");    
    //Get next "here"
    var here = $(this).closest(".bind_Name").next(".here");
    
    //Populate stuff
    $(here).find("legend").text(`Option ${selOption}`);
    $(here).find("input[type=text]").val(`Option ${selOption}`);
    //TO DETECT IF DATA HAS CHANGED
    var dataChanged = $(here).data("seloption") !== selOption;
    $(here).data("seloption",selOption);
    //Show the dropdown if data changed 
    var target = $(here).find(".dropdown-container");
    //Cose Other containers
    $(".dropdown-container").not(target).hide(tranSpeed);
    if(dataChanged) {      
      $(target).show(tranSpeed);  
    }else{ //Or toggle it otherwise
      $(target).toggle(tranSpeed);
    }
    
    
  });
});
.bind_Area {
  margin: 5px;
  padding: 7px 5px;
  text-align: left;
  font-weight: 700;
  font-size: 0.875em;
  border-radius: 4px;
  border: 1px solid #666666;
  background-color: #2E2E2E;
}

.bind_Name {
  display: flex;
}

.dropdown {
  display: block;
  padding: 2px 5px;
  border: 1px solid red;
  flex-flow: column wrap;
}

.dropdown-link {
  display: inline-flex;
  margin: 0px 5px;
  cursor: pointer;
  padding: 3px 10px;
  text-decoration: none;
  border-radius: 4px;
  background: repeat-x center center #000000;
  box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.15) 1px 1px;
  color: #CCFF66;
}

.dropdown-container {
  margin-top: 5px;
  margin-left: 0px;
  background-color: gray;
  display: none;
  overflow: hidden;
  margin: 5px;
}



.here {
  position: relative;
  /*Children will be postioned relative to this */
  margin-top: 5px;
  border: 1px solid blue;
  background-color: yellow;
  width: 85%;
  min-height: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div lass="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <button class="dropdown-link" data-selectedoption="00">OPTION 00</button>
    </div>
    <div class="dropdown">
      <button class="dropdown-link" data-selectedoption="01">OPTION 01</button>
    </div>
    <div class="dropdown">
      <button class="dropdown-link" data-selectedoption="02">OPTION 02</button>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here">
    <div class="dropdown-container">
      <fieldset>
        <legend></legend>
        <div>Proceed</div>
        <div>Cancel</div>
        <input type="text">
      </fieldset>
    </div>
  </div>
</div>
<!-- end of #bind_Area -->
<br>
<br>
<div lass="bind_Area">
  <div class="bind_Name">
    <div class="dropdown">
      <button class="dropdown-link" data-selectedoption="10">OPTION 00</button>
    </div>
    <div class="dropdown">
      <button class="dropdown-link" data-selectedoption="11">OPTION 01</button>
    </div>
    <div class="dropdown">
      <button class="dropdown-link" data-selectedoption="12">OPTION 02</button>
    </div>
  </div>
  <!-- end of #bind_Name -->
  <div class="here">
    <div class="dropdown-container">
      <fieldset>
        <legend></legend>
        <div>Proceed</div>
        <div>Cancel</div>
        <input type="text">
      </fieldset>
    </div>
  </div>
</div>
<!-- end of #bind_Area -->

相关问题
最新问题