隐藏兄弟姐妹选择

Question

我已经有了这个代码：

    var addclass = 'color';
    var $cols = $('.oslist').click(function(e) {
        $cols.removeClass(addclass);
        $(this).addClass(addclass);
        $(this).css('opacity', '1.0');
        $(this).siblings().css('opacity', '0.2');
        $(this).siblings('select').css('display', 'block');
    });

    .oslist {
        opacity:0.2;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
      <div style="text-align:center;border-radius:10px" class="col-md-3 oslist" tabindex="1">
        <img src="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png" style="width:80px"/>
        <br/>
        <select style="display:none;border:0px;background-color:green" class="mybtn1">
          <option value="ubuntu16">Ubuntu 16</option>
          <option value="ubuntu17">Ubuntu 17</option>
        </select>
      </div>
      <div style="text-align:center;border-radius:10px" class="col-md-3 oslist" tabindex="2">
        <img src="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png" style="width:80px"/>
        <br/>
        <select style="display:none;border:0px;background-color:green" class="mybtn1">
          <option value="centos69">CentOS  6.9</option>
          <option value="centos71">CentOS  7.1</option>
        </select>
      </div>
      <div style="text-align:center;border-radius:10px" class="col-md-3 oslist" tabindex="3">
        <img src="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png" style="width:80px"/>
        <br/>
        <select style="display:none;border:0px;background-color:green" class="mybtn1">
          <option value="ubuntu16">Ubuntu 16</option>
          <option value="ubuntu17">Ubuntu 17</option>
        </select>
      </div>
    </div>
<div id="installtype" class="col-md-12">
<div id="manual" style="display:none;background-color:gray;color:#fff" class="col-md-5"><input type="radio" name="osinstallation_type" /><b>Manual/ISO</b><br/>ISO will be mounted.
</div>
<div id="automatic" style="display:none;background-color:gray;color:#fff" class="col-md-5"><input type="radio" name="osinstallation_type" /><b>Automatic</b><br/>OS template will be installed.
</div>
</div>

我想做的是，当我单击" OnList" Div时，它应该在该特定div。

中显示"选择"选项

我该如何完成？任何帮助都将不胜感激:)

P.S： - 如果所选选项是" ubuntu16"或" ubuntu17"，我想显示"跨度：手动"＆amp;"跨度：自动"。 - 如果所选选项为" Centos69"，我想显示"跨度：仅自动"。

谢谢！

Answer 1

您可以通过在选定的div上添加类，然后添加CSS来显示select select select select select parent .oslist何时具有该类别

来实现这一目标。

.show_select.oslist select{
  display: inline-block !important;
}

我已经修改了var addclass = 'color show_select';

检查此代码：

var addclass = 'color show_select';
var $cols = $('.oslist').click(function(e) {
  $cols.removeClass(addclass);
  $(this).addClass(addclass);
    
  $(this).find("select").trigger("change");
  
  $(this).css('opacity', '1.0');
  $(this).siblings().css('opacity', '0.2');
  $(this).siblings('select').css('display', 'block');
});
$(".mybtn1").change(function(){
  var _val = $(this).val();
  if(_val=="ubuntu16" || _val=="ubuntu17"){
    $("#installtype span").show();
  }
  else{
    $("#installtype span").hide();
    $("#installtype #automatic").show();
  }
})

.oslist {
  opacity: 0.2;
}
.show_select.oslist select {
  display: inline-block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
  <div style="text-align:center;border-radius:10px" class="col-md-3 oslist" tabindex="1">
    <img src="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png" style="width:80px" />
    <br/>
    <select style="display:none;border:0px;background-color:green" class="mybtn1">
      <option value="ubuntu16">Ubuntu 16</option>
      <option value="ubuntu17">Ubuntu 17</option>
    </select>
  </div>
  <div style="text-align:center;border-radius:10px" class="col-md-3 oslist" tabindex="2">
    <img src="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png" style="width:80px" />
    <br/>
    <select style="display:none;border:0px;background-color:green" class="mybtn1">
      <option value="centos69">CentOS  6.9</option>
      <option value="centos71">CentOS  7.1</option>
    </select>
  </div>
  <div style="text-align:center;border-radius:10px" class="col-md-3 oslist" tabindex="3">
    <img src="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png" style="width:80px" />
    <br/>
    <select style="display:none;border:0px;background-color:green" class="mybtn1">
      <option value="ubuntu16">Ubuntu 16</option>
      <option value="ubuntu17">Ubuntu 17</option>
    </select>
  </div>
</div>
<div id="installtype">
  <span id="manual" style="display:none">Manual/ISO</span>
  <span id="automatic" style="display:none">Automatic</span>
</div>

Answer 2

尝试隐藏所有其他选择元素，然后显示特定的元素：

$('.oslist').on('click', function() {
  // Get a reference of $(this),
  // so you dont have to call the jQuery constructor multiple times
  var that = $(this);
  // Hide all the other select elements
  $('.oslist').not(that).children('select').hide();
  // Show the specific one
  that.children('select').show();
});

演示

$('.oslist').on('click', function() {
  // Get a reference of $(this),
  // so you dont have to call the jQuery constructor multiple times
  var that = $(this);
  // Hide all the other select elements
  $('.oslist').not(that).children('select').hide();
  // Show the specific one
  that.children('select').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
  <div style="text-align:center;border-radius:10px" class="col-md-3 oslist" tabindex="1">
    <img src="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png" style="width:80px"/>
    <br/>
    <select style="display:none;border:0px;background-color:green" class="mybtn1">
      <option value="ubuntu16">Ubuntu 16</option>
      <option value="ubuntu17">Ubuntu 17</option>
    </select>
  </div>
  <div style="text-align:center;border-radius:10px" class="col-md-3 oslist" tabindex="2">
    <img src="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png" style="width:80px"/>
    <br/>
    <select style="display:none;border:0px;background-color:green" class="mybtn1">
      <option value="centos69">CentOS  6.9</option>
      <option value="centos71">CentOS  7.1</option>
    </select>
  </div>
  <div style="text-align:center;border-radius:10px" class="col-md-3 oslist" tabindex="3">
    <img src="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png" style="width:80px"/>
    <br/>
    <select style="display:none;border:0px;background-color:green" class="mybtn1">
      <option value="ubuntu16">Ubuntu 16</option>
      <option value="ubuntu17">Ubuntu 17</option>
    </select>
  </div>
</div>