在HTML5中切換div塊的可見性

我想隱藏子類別並在點擊主類別時顯示。

我的HTML是 -

<div class="mainlink"> 
<h4><a href="#">Germany</a></h4> 
</div> 
<div class="sublink" hidden> 
    <ul> 
    <li><a href="#">League 1</a></li> 
    <li><a href="#">League 2</a></li> 
    </ul> 
</div> 
<div class="mainlink"> 
<h4><a href="#">United Kingdom</a></h4> 
</div> 
<div class="sublink" hidden> 
    <ul> 
    <li><a href="#">League 1</a></li> 
    <li><a href="#">League 2</a></li> 
    </ul> 
</div>

我試着用下面的JS，但我無法顯示在主要類別點擊子類別。我應該添加或更改什麼？

<script> 
$(document).ready(function() { 
    $('item').click(function() { 
     $(this).next('.sublink').toggleClass('visible'); 
    }); 
}); 
</script>

Sample layout image

來源

2017-04-10 Ram Kumar

更改選擇'」 .mainlink''，而不是'item' – Satpal

在您的HTML中不存在像item這樣的內容。

您需要使用class或id選擇器。

在你的情況下，它必須class選擇： - $('.mainlink').click(function() {： -

$(document).ready(function() { 
 
    $('.mainlink').click(function() { 
 
     $(this).next('.sublink').toggleClass('visible'); 
 
    }); 
 
});

.visible{ 
 
display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mainlink"> 
 
<h4><a href="#">Germany</a></h4> 
 
</div> 
 
<div class="sublink" hidden> 
 
    <ul> 
 
    <li><a href="#">League 1</a></li> 
 
    <li><a href="#">League 2</a></li> 
 
    </ul> 
 
</div> 
 
<div class="mainlink"> 
 
<h4><a href="#">United Kingdom</a></h4> 
 
</div> 
 
<div class="sublink" hidden> 
 
    <ul> 
 
    <li><a href="#">League 1</a></li> 
 
    <li><a href="#">League 2</a></li> 
 
    </ul> 
 
</div>

注： - 它腳本代碼前加jQuery庫是很重要的（以使其運行）。所以補充說（我在我的例子中添加它。）

來源

2017-04-10 06:01:31

來看通過OP的問題，OP似乎是初學者，我會做出更加明確的答案，但這看起來很好。 – Rajesh

的問題是在這裏：

$('item').click(function() { 
    $(this).next('.sublink').toggleClass('visible'); 
});

，但是有沒有像在你的HTML'項」。因此，將其更改爲：

$('.mainlink').click(function() { 
    $(this).next('.sublink').toggleClass('visible'); 
});

如<div class="mainlink">它具有mainlink類。

來源

2017-04-10 06:01:03

更正你的選擇mainlink

$(document).ready(function() { 
 
    $('.mainlink').click(function() { 
 
    $(this).next('.sublink').toggleClass('visible'); 
 
    }); 
 
});

.visible{ 
 
    display:block 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mainlink"> 
 
    <h4><a href="#">Germany</a></h4> 
 
</div> 
 
<div class="sublink" hidden> 
 
    <ul> 
 
    <li><a href="#">League 1</a></li> 
 
    <li><a href="#">League 2</a></li> 
 
    </ul> 
 
</div> 
 
<div class="mainlink"> 
 
    <h4><a href="#">United Kingdom</a></h4> 
 
</div> 
 
<div class="sublink" hidden> 
 
    <ul> 
 
    <li><a href="#">League 1</a></li> 
 
    <li><a href="#">League 2</a></li> 
 
    </ul> 
 
</div>

來源

2017-04-10 06:02:37 Satish

您使用的是選擇item更改，到.mainlink將工作

.用於訪問與class name .mainlink

您需要使用ID或類名如選擇

$(document).ready(function() { 
 
    $('.mainlink').click(function() { 
 
     $(this).next('.sublink').toggleClass('visible'); 
 
    }); 
 
});

.visible{ 
 
display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mainlink"> 
 
<h4><a href="#">Germany</a></h4> 
 
</div> 
 
<div class="sublink" hidden> 
 
    <ul> 
 
    <li><a href="#">League 1</a></li> 
 
    <li><a href="#">League 2</a></li> 
 
    </ul> 
 
</div> 
 
<div class="mainlink"> 
 
<h4><a href="#">United Kingdom</a></h4> 
 
</div> 
 
<div class="sublink" hidden> 
 
    <ul> 
 
    <li><a href="#">League 1</a></li> 
 
    <li><a href="#">League 2</a></li> 
 
    </ul> 
 
</div>

來源

2017-04-10 06:05:39 Abi

在HTML5中切換div塊的可見性

回答

相關問題