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

时间：2017-07-17 08:19:45

标签： javascript php jquery html css

因为我从数据库中获取数据并在前端显示它。一旦我点击更多信息文本，只需要显示作业名称，它应该显示文本的其余部分并再次点击更多信息，文本应该被隐藏

现在它只显示页面加载时的所有文本，只需点击更多信息就会隐藏文字并显示文字。

脚本代码：

<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>

7 个答案:

答案 0 :(得分：3)

因此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>

答案 1 :(得分：1)

如果我理解正确你想隐藏div加载？现在它显示并将在您第一次单击more info按钮时隐藏？

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

答案 2 :(得分：0)

使用display：none;对于#musicinfo ... 

#musicinfo{
 display: none;
}

答案 3 :(得分：0)

最初您不需要显示的内容或您不希望在屏幕上显示的内容将该div的属性设置为display: none，然后您可以通过设置点击事件和动画点击更多信息文本来显示该属性jquery的属性如

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

答案 4 :(得分：0)

修正此行<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/

答案 5 :(得分：0)

试试这个，如果#music是一个按钮：

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

我认为缺少</div>

答案 6 :(得分：0)

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

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

编写javascript代码，如下所示 -

HTML CODE 

 <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>
相关问题
最新问题