表打开时应用活动状态

问题描述 投票：0回答：3

我打算在打开时将一个活动状态应用于表格链接。我拥有它以使其悬停橙色，但我希望它保持橙色，并在关闭时恢复为蓝色。这也需要能够在一个页面上应用于多个表/触发器。

我不是JS开发人员所以对此不了解。

这是一个JSfiddle：https://jsfiddle.net/yn1dmzmr/

$(document).ready(function() {
    $('.drop-table').hide();

    $('.open-table').each(function() {
        $(this).show(0).on('click', function(e) {
            e.preventDefault();
            $(this).next('.drop-table').slideToggle(200);
            $(this).toggleClass('active');
        });
    });
});
/* * * * * * * * * * * * * * * * * * * * */
/* DROPDOWN ICON FOR THE TABLES STYLES */
/* * * * * * * * * * * * * * * * * * * * */

.open-table div {
  width: 100%;
  height: auto;
  display: block;
  max-width: 250px;
  background-color: #404E6A;
  font-family: helvetica;
  font-size: 14px;
  color: #ffffff!important;
  letter-spacing: 0px;
  line-height: 50px;
  text-indent: 30px;
  position: relative;
}

.open-table div a {
  text-decoration: none;
}

.open-table div:after {
  content: '';
  width: 30px;
  height: 30px;
  position: absolute;
  right: 15px;
  top: 10px;
  z-index: 9;
  background-color: #d3d3d3;
}

.open-table div:hover,
.open-table div:active {
  background-color: #ff6600;
}

.open-table div:hover:after,
.open-table div:active:after {
  transform: rotate(180deg);
}

.open-table div:hover {
  background-color: #ff6600;
}

.active {
  background-color: #ff6600!important;
}


/* * * * * * * * * * * * * * * * * * * * */
/* COMPARISON TABLE STYLES */
/* * * * * * * * * * * * * * * * * * * * */

.comparison-table {
  width: 100%;
  height: auto;
  table-layout: auto;
  font-family: helvetica;
  font-size: 14px;
  color: #000000;
  letter-spacing: 0px;
  line-height: 26px;
}

.comparison-table td {
  width: auto;
  text-align: center;
  padding: 13px 0px;
  border-right: 1px solid #d3d3d3;
}

.comparison-table tr:nth-child(odd) {
  background-color: #d6d6d6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container lb-margin">
    <a href="#" class="open-table">
        <div>Overview</div>
    </a>
    <div class="drop-table">
        <table class="comparison-table">
            <tr>
                <td width="200">Etching</td>
                <td>Flat sheets up to A2</td>
                <td>Flat sheets up to A0</td>
                <td>Flat sheets anysize</td>
            </tr>
            <tr>
                <td width="200">Etching</td>
                <td>Flat sheets up to A2</td>
                <td>Flat sheets up to A0</td>
                <td>Flat sheets anysize</td>
            </tr>
            <tr>
                <td width="200">Etching</td>
                <td>Flat sheets up to A2</td>
                <td>Flat sheets up to A0</td>
                <td>Flat sheets anysize</td>
            </tr>
        </table>
    </div>

    <a href="#" class="open-table">
        <div>Overview</div>
    </a>
    <div class="drop-table">
        <table class="comparison-table">
            <colgroup>
                <col class="col-1">
                <col>
                <col>
            </colgroup>
            <tr>
                <td>Etching</td>
                <td>Flat sheets up to A2</td>
                <td>Flat sheets up to A0</td>
                <td>Flat sheets anysize</td>
            </tr>
            <tr>
                <td>Etching</td>
                <td>Flat sheets up to A2</td>
                <td>Flat sheets up to A0</td>
                <td>Flat sheets anysize</td>
            </tr>
            <tr>
                <td>Etching</td>
                <td>Flat sheets up to A2</td>
                <td>Flat sheets up to A0</td>
                <td>Flat sheets anysize</td>
            </tr>
        </table>
    </div>

    <a href="#" class="open-table">
        <div>Overview</div>
    </a>
    <div class="drop-table">
        <table class="comparison-table">
            <colgroup>
                <col class="col-1">
                <col>
                <col>
            </colgroup>
            <tr>
                <td>Etching</td>
                <td>Flat sheets up to A2</td>
                <td>Flat sheets up to A0</td>
                <td>Flat sheets anysize</td>
            </tr>
            <tr>
                <td>Etching</td>
                <td>Flat sheets up to A2</td>
                <td>Flat sheets up to A0</td>
                <td>Flat sheets anysize</td>
            </tr>
            <tr>
                <td>Etching</td>
                <td>Flat sheets up to A2</td>
                <td>Flat sheets up to A0</td>
                <td>Flat sheets anysize</td>
            </tr>
        </table>
    </div>
</div>
javascript jquery html css
3个回答
2
投票

您正在将active应用于锚元素。根据您的布局，您需要将其添加到div。

fiddle

//Table Show / Hide Code	

	$(document).ready(function() {
		$('.drop-table').hide();

		$('.open-table').each(function() {
		    $(this).show(0).on('click', function(e) {
		        // This is only needed if your using an anchor to target the "box" elements
		        e.preventDefault();
		        
		        // Find the next "box" element in the DOM
		        $(this).next('.drop-table').slideToggle(200);
		        $(this).find('div').toggleClass('active');
		    });
		});
	});
/* * * * * * * * * * * * * * * * * * * * */
/* DROPDOWN ICON FOR THE TABLES STYLES */
/* * * * * * * * * * * * * * * * * * * * */

.open-table div {
	width:100%;
	height:auto;
	display:block;
	max-width:250px;
	background-color:#404E6A;

	font-family: helvetica;
	font-size: 14px;
	color: #ffffff!important;
	letter-spacing: 0px;
	line-height: 50px;
	text-indent:30px;
	position:relative;
  
  a {
    text-decoration:none;
  }

	&:after {
		content:'';
		width:30px;
		height:30px;
		position:absolute;
		right:15px;
		top:10px;
		z-index:9;

		background-color:#d3d3d3;
	}

	&:hover, &:active {
		background-color:#ff6600;

		&:after {
			transform: rotate(180deg);
		}
	}
} 

.open-table div:hover {
		background-color:#ff6600;
}
  
.active {
  background-color:#ff6600!important;
}


/* * * * * * * * * * * * * * * * * * * * */
/* COMPARISON TABLE STYLES */
/* * * * * * * * * * * * * * * * * * * * */
.comparison-table {
	width:100%;
	height:auto;
	table-layout: auto;

	font-family: helvetica;
	font-size: 14px;
	color: #000000;
	letter-spacing: 0px;
	line-height: 26px;

	td {
		width:auto;
		text-align:center;
		padding:13px 0px;
		border-right:1px solid #d3d3d3;
	}

	tr:nth-child(odd) {
		background-color:#d6d6d6;
	}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container lb-margin">


		<a href="#" class="open-table"><div>Overview</div></a>
		<!--Close the table opener -->
			<div class="drop-table" >
			    <table class="comparison-table">
			    	<tr>
			    		<td width="200">Etching</td>
			    		<td>Flat sheets up to A2</td>
			    		<td>Flat sheets up to A0</td>
			    		<td>Flat sheets anysize</td>
			    	</tr>
			    	<tr>
			    		<td width="200">Etching</td>
			    		<td>Flat sheets up to A2</td>
			    		<td>Flat sheets up to A0</td>
			    		<td>Flat sheets anysize</td>
			    	</tr>
			    	<tr>
			    		<td width="200">Etching</td>
			    		<td>Flat sheets up to A2</td>
			    		<td>Flat sheets up to A0</td>
			    		<td>Flat sheets anysize</td>
			    	</tr>
			    </table>
			</div>
		<!-- Close the drop table area -->



		<a href="#" class="open-table"><div>Overview</div></a>
		<!--Close the table opener -->
			<div class="drop-table">
			    <table class="comparison-table">
			    	<colgroup>
					    <col class="col-1">
					    <col>
					    <col>
					  </colgroup>
			    	<tr>
			    		<td>Etching</td>
			    		<td>Flat sheets up to A2</td>
			    		<td>Flat sheets up to A0</td>
			    		<td>Flat sheets anysize</td>
			    	</tr>
			    	<tr>
			    		<td>Etching</td>
			    		<td>Flat sheets up to A2</td>
			    		<td>Flat sheets up to A0</td>
			    		<td>Flat sheets anysize</td>
			    	</tr>
			    	<tr>
			    		<td>Etching</td>
			    		<td>Flat sheets up to A2</td>
			    		<td>Flat sheets up to A0</td>
			    		<td>Flat sheets anysize</td>
			    	</tr>
			    </table>
			</div>
		<!-- Close the drop table area -->



		<a href="#" class="open-table"><div>Overview</div></a>
		<!--Close the table opener -->
			<div class="drop-table">
			    <table class="comparison-table">
			    	<colgroup>
					    <col class="col-1">
					    <col>
					    <col>
					  </colgroup>
			    	<tr>
			    		<td>Etching</td>
			    		<td>Flat sheets up to A2</td>
			    		<td>Flat sheets up to A0</td>
			    		<td>Flat sheets anysize</td>
			    	</tr>
			    	<tr>
			    		<td>Etching</td>
			    		<td>Flat sheets up to A2</td>
			    		<td>Flat sheets up to A0</td>
			    		<td>Flat sheets anysize</td>
			    	</tr>
			    	<tr>
			    		<td>Etching</td>
			    		<td>Flat sheets up to A2</td>
			    		<td>Flat sheets up to A0</td>
			    		<td>Flat sheets anysize</td>
			    	</tr>
			    </table>
			</div>
		<!-- Close the drop table area -->
		

	</div>
	<!--Close -->
1
投票

你必须添加.open-table.active div而不是.open-table div:active所以你告诉浏览器我想在div旁边有.open-table时设置.active样式，因此你不必使用!important：

$(document).ready(function() {
  $('.drop-table').hide();
  
  $('.open-table').each(function() {
    $(this).show(0).on('click', function(e) {
      e.preventDefault();
      $(this).next('.drop-table').slideToggle(200);
      $(this).toggleClass('active');
    });
  });
});
/* * * * * * * * * * * * * * * * * * * * */
/* DROPDOWN ICON FOR THE TABLES STYLES */
/* * * * * * * * * * * * * * * * * * * * */

.open-table div {
  width: 100%;
  height: auto;
  display: block;
  max-width: 250px;
  background-color: #404E6A;
  font-family: helvetica;
  font-size: 14px;
  color: #ffffff!important;
  letter-spacing: 0px;
  line-height: 50px;
  text-indent: 30px;
  position: relative;
}

.open-table div a {
  text-decoration: none;
}

.open-table div:after {
  content: '';
  width: 30px;
  height: 30px;
  position: absolute;
  right: 15px;
  top: 10px;
  z-index: 9;
  background-color: #d3d3d3;
}

.open-table div:hover,
.open-table.active div {
  background-color: #ff6600;
}

.open-table div:hover:after,
.open-table div:active:after {
  transform: rotate(180deg);
}

.open-table div:hover {
  background-color:#ff6600;
}
.active {
  background-color:#ff6600!important;
}

/* * * * * * * * * * * * * * * * * * * * */

/* COMPARISON TABLE STYLES */

/* * * * * * * * * * * * * * * * * * * * */
.comparison-table {
  width:100%;
  height:auto;
  table-layout: auto;
  font-family: helvetica;
  font-size: 14px;
  color: #000000;
  letter-spacing: 0px;
  line-height: 26px;
}
.comparison-table td {
  width:auto;
  text-align:center;
  padding:13px 0px;
  border-right:1px solid #d3d3d3;
}
.comparison-table tr:nth-child(odd) {
  background-color:#d6d6d6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container lb-margin">
  <a href="#" class="open-table">
    <div>Overview</div>
  </a>
  <div class="drop-table">
    <table class="comparison-table">
      <tr>
        <td width="200">Etching</td>
        <td>Flat sheets up to A2</td>
        <td>Flat sheets up to A0</td>
        <td>Flat sheets anysize</td>
      </tr>
      <tr>
        <td width="200">Etching</td>
        <td>Flat sheets up to A2</td>
        <td>Flat sheets up to A0</td>
        <td>Flat sheets anysize</td>
      </tr>
      <tr>
        <td width="200">Etching</td>
        <td>Flat sheets up to A2</td>
        <td>Flat sheets up to A0</td>
        <td>Flat sheets anysize</td>
      </tr>
    </table>
  </div>

  <a href="#" class="open-table">
    <div>Overview</div>
  </a>
  <div class="drop-table">
    <table class="comparison-table">
      <colgroup>
        <col class="col-1">
        <col>
        <col>
      </colgroup>
      <tr>
        <td>Etching</td>
        <td>Flat sheets up to A2</td>
        <td>Flat sheets up to A0</td>
        <td>Flat sheets anysize</td>
      </tr>
      <tr>
        <td>Etching</td>
        <td>Flat sheets up to A2</td>
        <td>Flat sheets up to A0</td>
        <td>Flat sheets anysize</td>
      </tr>
      <tr>
        <td>Etching</td>
        <td>Flat sheets up to A2</td>
        <td>Flat sheets up to A0</td>
        <td>Flat sheets anysize</td>
      </tr>
    </table>
  </div>

  <a href="#" class="open-table">
    <div>Overview</div>
  </a>
  <div class="drop-table">
    <table class="comparison-table">
      <colgroup>
        <col class="col-1">
        <col>
        <col>
      </colgroup>
      <tr>
        <td>Etching</td>
        <td>Flat sheets up to A2</td>
        <td>Flat sheets up to A0</td>
        <td>Flat sheets anysize</td>
      </tr>
      <tr>
        <td>Etching</td>
        <td>Flat sheets up to A2</td>
        <td>Flat sheets up to A0</td>
        <td>Flat sheets anysize</td>
      </tr>
      <tr>
        <td>Etching</td>
        <td>Flat sheets up to A2</td>
        <td>Flat sheets up to A0</td>
        <td>Flat sheets anysize</td>
      </tr>
    </table>
  </div>
</div>
0
投票

简单更新这个：

.active {
   background-color:#ff6600!important;
}

至：

.active div {
   background-color:#ff6600!important;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.