javascript - 表打开时应用事件状态

Question

我正在尝试在打开时将事件状态应用于表链接。我让它悬停在橙色，但我希望它保持橙色，并在关闭时恢复为蓝色。这还需要能够应用于一页上的多个表/触发器。

我不是 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>

Answer 1

您正在将 active 应用于 anchor 元素。根据您的布局，您需要将其添加到 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 -->