使用锚链接到部分并显示下一个元素

Question

我有一些常见问题，只有当用户点击问题时才会显示答案。所以基本切换显示和隐藏。

我想在页面顶部有一些锚链接，不仅链接到正确的问题，而且还揭示了答案。

这是codepen - 正如您可以看到当您点击顶部链接时，它链接到问题，但不显示答案。当点击页面顶部的链接时，我想要display: block的答案。

所以要确认：

1. 单击链接在页面顶部
2. 滚动到
3. 相应H5标签下直接打开p标签的问题（对应H5标签）。

想知道做到这一点的最佳方法。我尝试在顶部给出一个类的链接，然后单击时，获得href属性，但似乎无法得到此工作。

HTML：

<a href="#faq1">What does this include?</a> 
<h5 id="faq1">What does landlord insurance cover me for?</h5> 
<p>The standard perils landlord insurance covers you for are the same as standard home insurance. They are things like fire, floods, escape of water, subsidence etc. The differences can be things like loss of keys, loss of rent, conditions on leaving it unoccupied etc. Our online quote system or advisor will be able to discuss your requirements and find something that suits your needs exactly. </p> 

的jQuery：

$(".newfaqs h5").next().hide(); 
$(".newfaqs h5").click(function() { 
    $(this).toggleClass('expanded'); 
    $(this).next().slideToggle(); 
}); 

Answer 1

尝试。

$(".newfaqs h5").next().hide(); 
 
$(".newfaqs h5").click(function() { 
 
    $(this).toggleClass('expanded'); 
 
    $(this).next().slideToggle(); 
 
}); 
 

 
$(".link-questions").click(function(){ 
 
    
 
    var question=$($(this).attr('href')); 
 
    question.next('p').slideDown(); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="link-questions" href="#faq1">What does this include?</a> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br> Asperiores in aperiam error corrupti labore perspiciatis suscipit debitis iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo rerum quidem ipsam possimus, eius nisi laudantium! Unde laudantium quod accusantium est, doloribus! Repellat, minima commodi quibusdam fugiat, provident ipsum nobis.</p> 
 

 
<div class="newfaqs"> 
 
<h5>If I don’t receive rent for a period, can I claim for this?</h5> 
 
<p>You can claim for loss of rent if your building is uninhabitable due to damage or an accident which is covered by the rest of the policy (see: What does landlord insurance cover me for?). Some of the policies offered by our panel can also insure your property whilst it is empty however, this only covers you for damage whilst the property is already empty and therefore won’t cover your lost rent.<br><br> 
 
Finally, some insurers on our panel offer an extension to their policy which means you can claim for loss of rent if the tenant can’t/hasn’t paid you. Please be aware though, that without this extension, you can only claim for loss of rent if your property is uninhabitable due to damage.</p> 
 
<h5>Does landlord insurance cover me for loss of keys?</h5> 
 
<p>Yes , we can cover loss of keys, but also for the replacement of locks and damage from an emergency access too. 
 
Say your tenants vacate your property and keep a set of keys, or whilst unoccupied you lose the master set? Replacing the locks and keys or worse having to break in, in an emergency during the time you lose your keys, can cost a considerable amount. We can offer peace of mind knowing these easy accidents can be covered by your landlord insurance.</p> 
 
<h5>I’ve been told you offer the cheapest landlord insurance, but my online quote is not the cheapest?</h5> 
 
<p>Whilst our online insurance portal offers our best rates to a large proportion of our landlord customers, we always advise speaking to our advisors directly if you have anything out of the ordinary, want specific cover for something or want to discuss ways to get cover even cheaper. We can often discuss lowering areas of cover you may not need, or want, or help you source a discount. 
 
<br><br> 
 
As a specialist broker, we pride ourselves on understanding our customers’ needs and finding them with a policy that offers the best landlord insurance, at the cheapest price. However, sometimes this is best done over the phone.</p> 
 
<h5>I’ve had trouble finding landlord insurance for my coach house, can you help?</h5> 
 
<p>A lot of landlords with coach houses to rent find it a struggle to get the right cover (or any cover at all) with high street insurers or online. Because we have access to large proportions of the insurance market and have good relationships with the insurers themselves we can find policies that others can’t. You will need to speak directly to one of our advisors though!</p> 
 
<h5>I can’t find landlord insurance for my separate garage, please help!</h5> 
 
<p>As long as the building is on the deeds to the property, be it a garage, out building or annex we’ll be able to help you find the right policy. The tenant will need to occupy the property too. This means if you rent the garage or annex separately you may need to look to cover these on separate policies.</p> 
 
<h5>If my tenant(s) trashes my property can I claim?</h5> 
 
<p>We can provide cover for malicious damage. This doesn’t necessarily come as standard on all policies from our panel of insurers so make sure you ask us for it when you call us or get a quote online. 
 
<br><br> 
 
With malicious damage cover in place, if a tenant damages your building or your contents, you’ll be able to claim and we’ll do our best to recover the cost of the damage caused. So if a tenant spray paints your walls or slashes your sofas, we’ll sort it for you. </p> 
 
<h5>Will my policy cover me for subsidence?</h5> 
 
<p>If you need cover for subsidence, we can provide it. However, there is a “but” – if you your property has a history of subsidence we’ll require an inspection of the property to establish the risk of further damage before we provide cover. </p> 
 
<h5>How does having a different type of tenant such as DSS or student affect my policy?</h5> 
 
<p>Insurance is all about covering risks. Statistically, tenants such as DSS and students pose more of a risk to your property. After all, it’s no secret that students like to party! 
 
<br><br> 
 
Some insurers or brokers simply won’t cover you if you have high risk tenants living in your property. However, we can provide cover for a wide range of tenant types. So, if that student party gets a bit out of hand and a window gets broken for example, you’ll be covered. </p> 
 
<h5>I can’t find landlord insurance because of a history of subsidence.</h5> 
 
<p>The simple fact of the matter is all insurers are wary of properties with subsidence, even if it was 10 years ago! Usually we won’t have trouble finding you insurance as long as you can provide the correct paper work to prove the initial cause has been dealt with and subsequent checks have been made. Speak to us on the phone, or via email, and we can discuss your options with you.</p> 
 
<h5>How do I calculate my sums insured?</h5> 
 
<p>Many of our customers often assume the rebuild price is the same as the market value. This however is not the most accurate way to understand the costs because this value does not include the demolition and debris removal of the previous property, or the architects, materials or labour costs to re-build. Not forgetting, many insurers will charge a penalty, for underinsuring a property so it’s very important this is correct. 
 
<br><br> 
 
We advise all our customers to use a rebuild calculator or professional service to get the best landlord insurance cover for their property.</p> 
 
<h5 id="faq1">What does landlord insurance cover me for?</h5> 
 
<p>The standard perils landlord insurance covers you for are the same as standard home insurance. They are things like fire, floods, escape of water, subsidence etc. The differences can be things like loss of keys, loss of rent, conditions on leaving it unoccupied etc. Our online quote system or advisor will be able to discuss your requirements and find something that suits your needs exactly. </p> 
 
<h5>I need landlord insurance for multiple properties.</h5> 
 
<p>That’s great. We can help you here too!<br><br> 
 
We specialise in finding great insurance policies for landlords with multiple properties. In fact if you have between 1 and 50 properties we can often find you discounts on the policies and the administration fees 
 
<br><br> 
 
We can also include any new policies pro-rata, meaning you can keep the same renewal date for all you properties. 
 
</p> 
 
<h5>I’ve been a landlord for a number of years and I’ve never had to claim. Will this reduce my premium?</h5> 
 
<p>Absolutely. We really value experienced landlords and know that when you’ve been at it for a while, you tend to be lower risk. With that in mind, we reward careful and experienced landlords with no claims discounts. </p> 
 
       </div> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br> Asperiores in aperiam error corrupti labore perspiciatis suscipit debitis iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo rerum quidem ipsam possimus, eius nisi laudantium! Unde laudantium quod accusantium est, doloribus! Repellat, minima commodi quibusdam fugiat, provident ipsum nobis.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br> Asperiores in aperiam error corrupti labore perspiciatis suscipit debitis iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo rerum quidem ipsam possimus, eius nisi laudantium! Unde laudantium quod accusantium est, doloribus! Repellat, minima commodi quibusdam fugiat, provident ipsum nobis.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate assumenda, dolore doloribus sint vitae, eligendi odio cupiditate nobis ex perferendis cum, optio commodi omnis veniam alias! Labore, iste, corporis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates atque laudantium voluptas, a autem! Ratione nulla dolore corporis laborum labore!<br><br> Asperiores in aperiam error corrupti labore perspiciatis suscipit debitis iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo rerum quidem ipsam possimus, eius nisi laudantium! Unde laudantium quod accusantium est, doloribus! Repellat, minima commodi quibusdam fugiat, provident ipsum nobis.</p>

Answer 2

使用此：

$(".newfaqs h5").next().hide(); 
    $(".newfaqs h5").click(function() { 
     $(this).toggleClass('expanded'); 
     $(this).next().slideToggle(); 
    }); 

    $('a').on('click' ,function(){$($(this).attr('href')).next().slideDown();}); 

http://codepen.io/anon/pen/MwWVVE

Answer 3

添加下列内容的脚本。

$("a").click(function() { 
$('[id="'+$(this).attr('href').replace("#","")+'"]').next().slideDown(); 
}); 

指的jsfiddle http://jsfiddle.net/5gebq82q/1/