-1
.TQA-SF006-U-160mm-parentをクリックすると、.div-TQA-SF006-U-160が常に表示され、.div-TQA-SF006-U-staticが表示されますは、mouseout関数が実行された後になります。JQuery - divを表示する場合にクリックしてください
ご協力いただければ幸いです。これを行うには
A
答えて
-1
クリックした
$(document).ready(function() {
var $parent = $(".TQA-SF006-U-160mm-parent"),
$static = $(".div-TQA-SF006-U-static"),
$160 = $(".div-TQA-SF006-U-160");
$parent.on('mouseover', function() {
if (!$(this).hasClass('clicked')) {
$static.addClass('hide');
$160.addClass('show');
}
}).on('mouseout', function() {
if (!$(this).hasClass('clicked')) {
$static.removeClass('hide');
$160.removeClass('show');
}
}).on('click', function() {
$(this).addClass('clicked');
$static.addClass('hide');
$160.addClass('show');
});
});.div-TQA-SF006 .td-suspension-child-row2:hover {
text-decoration: underline;
}
.table-suspension-list {
border: 0;
}
.table-suspension-list .partNumber {
border: 1px solid #1F497D;
border-bottom: 1px solid white;
background-color: #1F497D;
color: white;
font-family: erasFamily;
font-size: 16px;
font-weight: bold;
line-height: 5px;
padding: 0;
vertical-align: middle;
}
.table-suspension-list .partNumber-bottom {
border: 1px solid #1F497D;
background-color: #1F497D;
color: white;
font-family: erasFamily;
font-size: 16px;
font-weight: bold;
padding: 0;
vertical-align: middle;
}
.table-suspension-list .partNumber div {
color: white;
}
.table-suspension-list .partNumber-bottom div {
color: white;
}
.table-suspension-list .partDescription {
border: 1px solid #1F497D;
color: #1F497D;
font-family: erasFamily;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 5px;
padding: 0;
text-transform: uppercase;
vertical-align: middle;
}
.table-suspension-list .partDescription div {
color: #1F497D;
}
.table-suspension tbody {
text-align: center;
vertical-align: middle;
color: #002060;
}
.table-suspension th {
background-color: white;
border: 0;
border-top: 2px solid #002060;
padding: 10px 0 10px 0;
vertical-align: middle;
font-family: erasFamily;
font-size: 26px;
color: #002060;
text-transform: uppercase;
}
.td-suspension-parent {
background-color: #deeaf6;
text-align: center;
vertical-align: middle;
font-weight: bold;
}
.td-suspension-child {
background-color: white;
text-align: center;
vertical-align: middle;
}
.td-suspension-child-row2 {
background-color: white;
text-align: center;
vertical-align: middle;
}
.td-suspension-child div {
font-size: 30px;
font-weight: bold;
padding: 5px;
}
.td-suspension-child-row2 div {
font-size: 30px;
font-weight: bold;
padding: 5px;
}
.div-TQA-SF006-U-160 {
display: none;
}
.hide {
display: none;
}
.show {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-TQA-SF006">
<table class="table-suspension">
<tbody>
<th colspan="6">
SPECIFICATIONS
</th>
<tr>
<td class="td-suspension-parent" colspan="3" style="width: 50%">Part Number</td>
<td class="td-suspension-parent" colspan="3" style="width: 50%">Description</td>
</tr>
<tr>
<td class="td-suspension-child" colspan="3">TQA-SF006</td>
<td class="td-suspension-child" colspan="3">Underslung Air Suspension for 10 Ton Axle</td>
</tr>
<tr>
<td class="td-suspension-parent" colspan="6">Available Ride Height</td>
</tr>
<tr>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-160mm-parent">160mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-200mm-parent">200mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-250mm-parent">250mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-275mm-parent">275mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-300mm-parent">300mm</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="div-TQA-SF006-U-static">
<table class="table-suspension">
<tbody>
<th>
Spare Parts
</th>
<tr>
<td class="td-suspension-parent">Hover mouse over desired Ride Height for pop-up information</td>
</tr>
</tbody>
</table>
</div>
<div class="div-TQA-SF006-U-160">
<table class="table-suspension">
<tbody>
<th colspan="6">
SPARE PARTS
</th>
<tr>
<td class="td-suspension-parent">TQA-SPA07</td>
<td class="td-suspension-parent">TQA-PB006</td>
<td class="td-suspension-parent">TQA-AB08</td>
<td class="td-suspension-parent">TQA-SA08</td>
<td class="td-suspension-parent">TQA-UB001</td>
<td class="td-suspension-parent">TQA-SPA20</td>
</tr>
<tr>
<td class="td-suspension-chlid">Parabolic Spring Straight Type</td>
<td class="td-suspension-chlid">Pivot Bolt Kit</td>
<td class="td-suspension-chlid">Air Spring</td>
<td class="td-suspension-chlid">Shock Absorber</td>
<td class="td-suspension-chlid">U-Bot Kit</td>
<td class="td-suspension-chlid">Spring Bush</td>
</tr>
</tbody>
</table>
</div>
0
1つの簡単な方法は、そのdivの条件がclickedであるかどうか、チェックするためにグローバル変数を追加することです。次に、あなたがそのdiv要素が
var clicked = false;
$(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").hide();
$(".div-TQA-SF006-U-160").show();
}
});
$(".TQA-SF006-U-160mm-parent").on('mouseout', function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").show();
$(".div-TQA-SF006-U-160").hide();
}
});
$(".TQA-SF006-U-160mm-parent").click(function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").hide();
$(".div-TQA-SF006-U-160").show();
clicked = true;
}
else{
$(".div-TQA-SF006-U-static").show();
$(".div-TQA-SF006-U-160").hide();
clicked = false;
}
});
をクリックされないmouseoverとmouseoutイベントを、実行するデモ：https://jsfiddle.net/xpk82w65/4/
また、あなたは再呼び出し、それらの要素なしで、同じ要素に結合添付することができます。例えば ：
$(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
})
.on('mouseout', function(){
})
.on('click', function(){
});
デモ：あなたがホバリングしている要素/クリックの状態を追跡するためにクラスを追加し、状態がない場合にのみ、マウスオーバー/マウスアウトコードを使用することができますhttps://jsfiddle.net/xpk82w65/6/
+0
完璧に働いた、ありがとう。 – terryeah
関連する問題
- 1. Jquery Divクリックして表示しないでください
- 2. jQuery-mouseoverの場合はスライダダウンDIVを表示してください
- 3. コンテナ内のdivを表示するには、リンクをクリックしてください。
- 4. 別のDIVが表示されていない場合にDIVを表示
- 5. JQuery - DIV IDが表示されている場合
- 6. コンテンツを表示して表示するにはdivをクリックしてください。
- 7. SKAnnotationViewを非表示にする場合は、マップビューの他の場所をクリックしてください。
- 8. Javascriptが正しく表示されない場合は、ここをクリックしてください。
- 9. コンテンツを表示/非表示にするにはをクリックしてください
- 10. コンテンツを表示し、ホバーアップデートのコンテンツをクリックしてください
- 11. 「Photoswipe」ギャラリーがイメージに表示されます。小さい画像の場合はクリックしてください。
- 12. 角度検出divをクリックしてdiv内のdivを表示しないでください
- 13. 特定のテキストがスパン内に表示されている場合はdiv divを表示します
- 14. クリック後にクラスが表示される場合のJquery
- 15. divのテキストが表示される場合は、クラスまたはスタイルを追加してください
- 16. クリックして水平スクロール表示をスクロールしてください
- 17. jquery displayクリックした場所によって異なるdivにimgを表示
- 18. 十分なスペースがある場合にのみ、右に表示してください。そうでない場合は下に移動してください。
- 19. divを閉じるにはクリックしてください
- 20. jquery make divをクリックしたときに表示される。
- 21. Jqueryがまだ表示されていない場合のみスライドする
- 22. 'ko with'が表示されていない場合は、別のコンテンツを表示してください
- 23. Divを実行していない場合画像をクリックするとslideToggle（）が表示されません
- 24. Javascriptでクリックしてdivを表示しない（既に他のdivを表示しているクリック）
- 25. 地図画像と表示値をクリックしてください
- 26. コンテンツを表示するにはクリックしてください反応するJS
- 27. jQueryクリックに基づいてdivコンテンツをスワップして非表示にする
- 28. divを別のdivをクリックして表示/非表示
- 29. divをクリックして非表示にすると非表示
- 30. スウィフトイメージアスペクト高さの画像が正しく表示されない場合に入力してください
の可能性のある重複した[jQueryの：クリックで目に見えるとどまる、ホバー上のdivを非表示]（https://stackoverflow.com/questions/4273560/jquery-hide-div-on-hover -stay-visible-on-click） –
mouseout関数が実行された後で私の問題が発生していることを明確に述べました。私はそれがどのように重複しているかわかりません。 – terryeah