单击无法使用jQuery显示或隐藏文本的div

Question

当我从数据库中获取数据并在前端显示时。一旦我单击更多信息文本，仅需要显示作业名称，它应该显示其余文本，然后再次单击更多信息，则该文本应该被隐藏。

现在，它仅在单击更多信息后才在加载时间页面时显示所有文本，它隐藏了文本并显示了该文本。

脚本代码：

<script>
$(document).ready(
  function() {
    $("#music").click(function() {
        $("#musicinfo").toggle();
    });
  });
</script>

HTML：

    <div class="digitalmarketingassociate">
                  <span class="digit"><?php echo $r->job_name ;?></span>
                  <div class="applynow">Apply Now</div>
                    <div class="moreinfo" id="music" >More Info</div>
                        <div id="musicinfo">            

                            <h3 class="job">Job Description</h3>
                            <p class="jobdes"><?php echo $r->job_description ;?></p>

                            <h3 class="job">Desired Skills & Experience</h3>
                            <p class="desiredskills"><?php echo $r->skills_experience ;?></p>

                            <h3 class="job">Educational Qualification</h3>
                            <p class="educationalqua"><?php echo $r->qualification ;?></p>

                            <h3 class="job">Roles and Responsibilities</h3>
                            <ul class="rolesand">
                                <li class="rolesandres"><?php echo $r->roles_responsibilities;?></li>
                            </ul>
                            <h3 class="job">What we offer</h3>
                            <p class="whatweoffer"><?php echo $r->what_we_offer ;?></p>

             <h3  class="job">Share this job</h3>
                            <div class="facebookaccount"><div class="fb-share-button" data-href="<?php echo base_url()?>career/careers/<?php echo $r ->jobs_name ;?>"data-layout="button_count"></div></div>
                            <div class="twitteraccount"><a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></div>
                            <div class="linkedinaccount"><span class="linkedincount"><script type="IN/Share" data-url="<?php echo base_url()?>career/careers/<?php echo $r ->jobs_name ;?>" data-counter="right"></script></span></div>
                            <div class="googleaccount"><div class="g-plus" data-action="share" data-height="24" data-href="<?php echo base_url()?>career/careers/<?php echo $r ->jobs_name ;?>"></div></div>                                
  </div>

Answer 1

因此，div将在加载时被隐藏，并且仅当您单击“更多信息”时才可见：

 $(".moreinfo").on('click', function() { $(this).next().toggle(); }); 

 #musicinfo { display: none; } .moreinfo { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="digitalmarketingassociate"> <span class="digit">JOB NAME</span> <div class="applynow">Apply Now</div> <div class="moreinfo" id="music">More Info</div> <div id="musicinfo"> <h3 class="job">Job Description</h3> <p class="jobdes"> Job Description </p> <h3 class="job">Desired Job Description</h3> <p class="desiredskills"> Job Description </p> <h3 class="job">Educational Qualification</h3> <p class="educationalqua"> Educational Qualification </p> <h3 class="job">Roles and Responsibilities</h3> <ul class="rolesand"> <li class="rolesandres"> Roles and Responsibilities </li> </ul> <h3 class="job">What we offer</h3> <p class="whatweoffer"> What we offer </p> <h3 class="job">Share this job</h3> <div class="facebookaccount"> <div class="fb-share-button" data-href="<?php echo base_url()?>career/careers/<?php echo $r ->jobs_name ;?>" data-layout="button_count"></div> </div> <div class="twitteraccount"><a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false">Tweet</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </div> <div class="linkedinaccount"><span class="linkedincount"><script type="IN/Share" data-url="<?php echo base_url()?>career/careers/<?php echo $r ->jobs_name ;?>" data-counter="right"></script></span></div> <div class="googleaccount"> <div class="g-plus" data-action="share" data-height="24" data-href="<?php echo base_url()?>career/careers/<?php echo $r ->jobs_name ;?>"></div> </div> </div> <div class="moreinfo" id="music">More Info</div> <div id="musicinfo"> <h3 class="job">Job Description</h3> <p class="jobdes"> Job Description </p> <h3 class="job">Desired Job Description</h3> <p class="desiredskills"> Job Description </p> <h3 class="job">Educational Qualification</h3> <p class="educationalqua"> Educational Qualification </p> <h3 class="job">Roles and Responsibilities</h3> <ul class="rolesand"> <li class="rolesandres"> Roles and Responsibilities </li> </ul> <h3 class="job">What we offer</h3> <p class="whatweoffer"> What we offer </p> <h3 class="job">Share this job</h3> <div class="facebookaccount"> <div class="fb-share-button" data-href="<?php echo base_url()?>career/careers/<?php echo $r ->jobs_name ;?>" data-layout="button_count"></div> </div> <div class="twitteraccount"><a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false">Tweet</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </div> <div class="linkedinaccount"><span class="linkedincount"><script type="IN/Share" data-url="<?php echo base_url()?>career/careers/<?php echo $r ->jobs_name ;?>" data-counter="right"></script></span></div> <div class="googleaccount"> <div class="g-plus" data-action="share" data-height="24" data-href="<?php echo base_url()?>career/careers/<?php echo $r ->jobs_name ;?>"></div> </div> </div> <div class="moreinfo" id="music">More Info</div> <div id="musicinfo"> <h3 class="job">Job Description</h3> <p class="jobdes"> Job Description </p> <h3 class="job">Desired Job Description</h3> <p class="desiredskills"> Job Description </p> <h3 class="job">Educational Qualification</h3> <p class="educationalqua"> Educational Qualification </p> <h3 class="job">Roles and Responsibilities</h3> <ul class="rolesand"> <li class="rolesandres"> Roles and Responsibilities </li> </ul> <h3 class="job">What we offer</h3> <p class="whatweoffer"> What we offer </p> <h3 class="job">Share this job</h3> <div class="facebookaccount"> <div class="fb-share-button" data-href="<?php echo base_url()?>career/careers/<?php echo $r ->jobs_name ;?>" data-layout="button_count"></div> </div> <div class="twitteraccount"><a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false">Tweet</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </div> <div class="linkedinaccount"><span class="linkedincount"><script type="IN/Share" data-url="<?php echo base_url()?>career/careers/<?php echo $r ->jobs_name ;?>" data-counter="right"></script></span></div> <div class="googleaccount"> <div class="g-plus" data-action="share" data-height="24" data-href="<?php echo base_url()?>career/careers/<?php echo $r ->jobs_name ;?>"></div> </div> </div> 

Answer 2

如果我对您的理解正确，那么您想隐藏加载时的div吗？ 现在它会显示，并且在您第一次单击“ more info按钮时会隐藏吗？

这可以通过添加display来解决： moreinfo div的样式表中没有。

Answer 3

使用显示：无； 对于#musicinfo ...

#musicinfo{
 display: none;
}

Answer 4

最初不需要显示的内容或不想在屏幕上显示的内容设置要display: none div的属性display: none之后，可以通过设置click event和jQuery的animate属性来在单击更多信息文本时将其显示

$(#more-info).on('click',function(){
$('.job').css('display':'block');
});

Answer 5

修复此行<p class=""desiredskills"><?php echo $r->skills_experience ;?></p>

<p class="desiredskills"><?php echo $r->skills_experience ;?></p>

然后再试一次

https://jsfiddle.net/he4zfxge/

使用ID时，第一个元素将起作用试试此https://jsfiddle.net/he4zfxge/2/

Answer 6

如果#music是一个按钮，请尝试以下操作：

$(document).ready(
function() {
    $("#music").on("click", function() {
        $("#musicinfo").show();
    });
    $("#music").off("click", function() {
        $("#musicinfo").hide();
    });
});

我认为缺少</div>

Answer 7

将id属性更改为class。 在您的html代码中，将music和musicinfo id定义为class。

注意：-html验证-您不能在html页面中定义多个具有相同名称的id。

编写javascript代码，如下所示-

HTML代码

 <div class="digitalmarketingassociate">
              <span class="digit">test1</span>
              <div class="applynow">Apply Now</div>
                <div class="moreinfo">More Info</div>
                    <div class="musicinfo">            
                      test 1  description   
                    </div>
                </div>

                <div class="digitalmarketingassociate">
              <span class="digit">test2</span>
              <div class="applynow">Apply Now</div>
                <div class="moreinfo">More Info</div>
                    <div class="musicinfo">            
                      test 2  description      
                    </div>
                </div>


                <div class="digitalmarketingassociate">
              <span class="digit">test3</span>
              <div class="applynow">Apply Now</div>
                <div class="moreinfo">More Info</div>
                    <div class="musicinfo">            
                      test 3    description     
                    </div>
                </div>

JAVASCRIPT

 <script type="text/javascript">
  $(document).ready(function(){
    $(' .musicinfo').hide();
    $(".moreinfo").click(function() {
        $('.musicinfo').hide();
        $(this).parent().find('.musicinfo').toggle();
    });
  });
</script>