使用jQuery显示/隐藏DIV-不能在一个页面中工作

时间:2018-07-15 作者:kibus90

两天来我只和一件事斗争。。。但我只是放弃了!我已经做了一个JSFIDLE来检查它,可能是我的代码错了或其他什么。。但是该代码在JSFIDLE上运行良好,但在我的this页面(在另一个子页面上,该代码运行正常)上则不行。。。

我使用WPJob Manager Resumes... 我按代码生成页面[简历]

按插件WPBakery Page Builder 我将自定义JS添加到子页面。所有代码的工作方式都类似于:alert(“test”),但不适用于以下情况:

    <script>
jQuery(document).ready(function($){
$(".more-info").click(function(){
$(this).closest(\'.resume_list\').find(\'.main-box-info\').slideToggle();
   $(this).closest(\'.more-info\').find(\'span.click-show-notes, span.click-hide-notes\').toggle();
});
});
    </script>

<ul class="resumes">
    <li class="resume_list" style="display: flow-root">


            <div class="resume-detalis">

                <div class="resume-title-col resume-column">
                    <h5 class="job-offer-title"><a href="#">Kunegunda Wsteczna</a></h5>
                </div>   

                <div class="resume-location resume-column">
                   <span class="locaction-resume">Wsteczna, Mongolia</span>
                </div>

                <ul class="meta-info resume-column">

                <li><span class="current-status-candidate szukam-pracy" style="white-space: nowrap;margin-right:6px;display:inline-block">I\'m looking for a job</span> </li>

                    <li class="resume-last-update">
                      <i>ost. akt.:</i> 1 min temu                </li>
                </ul>
            </div>
    <div class="more-info" style="cursor:pointer;border-radius: 5px; border: 1px solid #ccc!important; color: #515151; background: #f6f6f6; width: fit-content; margin-right: auto!important; margin-top: 5px!important; position: relative; font-size: 15px; padding: 0 7px;"><span class="click-show-notes">Show more<i class="fas fa-arrow-down" style="margin-left: 8px"></i></span><span class="click-hide-notes" style="display:none">Show less<i class="fas fa-arrow-up" style="margin-left: 8px"></i></span></div>

        <div class="main-box-info" style="display:none;">

        <div class="main-box-info-tab">
          <table class="main-table-resume">
        <tbody>
            <tr>
                <td class="main-info-table-res dob">Date of birth</td>
                <td class="dob"><div class="icon-div"><i class="far fa-calendar-alt icon-in-table"></i></div>
                14.07.1981 (37 lat)         </td>
            </tr>
            <tr>
                <td class="main-info-table-res">Phone</td>
                <td><div class="icon-div"><i class="far fa-mobile-android-alt icon-in-table"></i></div>
                <a href="tel:0048596596321">0048596596321</a></td>
            </tr>

            <tr>
            <td class="main-info-table-res">Date of registration</td>
            <td style="white-space: nowrap"><div class="icon-div"><i class="far fa-at icon-in-table"></i></div>
            14.07.2018</td>
            </tr>

        </tbody>
    </table></div>
        </div>
        </li>




    <li class="resume_list" style="display: flow-root">


            <div class="resume-detalis">

                <div class="resume-title-col resume-column">
                    <h5 class="job-offer-title"><a href="#">Tobiasz Rokiewicz</a></h5>
                </div>   

                <div class="resume-location resume-column">
                   <span class="locaction-resume">Płock, Polska</span>
                </div>

                <ul class="meta-info resume-column">

                <li><span class="current-status-candidate szukam-pracy" style="white-space: nowrap;margin-right:6px;display:inline-block">I\'m looking for a job</span> <span class="current-status-candidate fhs" style="white-space: nowrap;display:inline-block">fhs</span></li>

                    <li class="resume-last-update">
                      <i>ost. akt.:</i> 14 hours temu                </li>
                </ul>
            </div>
    <div class="more-info" style="cursor:pointer;border-radius: 5px; border: 1px solid #ccc!important; color: #515151; background: #f6f6f6; width: fit-content; margin-right: auto!important; margin-top: 5px!important; position: relative; font-size: 15px; padding: 0 7px;"><span class="click-show-notes">Show more<i class="fas fa-arrow-down" style="margin-left: 8px"></i></span><span class="click-hide-notes" style="display:none">Show less<i class="fas fa-arrow-up" style="margin-left: 8px"></i></span></div>

        <div class="main-box-info" style="display:none;">
     <div class="extra-box-notes one-box">
    <div class="frame-box title-box"><b>Notes</b></div>
    <div class="frame-box content-box"><p>fafasfasfasfasf</p>
    </div>
    </div>

        <div class="main-box-info-tab one-box">
          <table class="main-table-resume">
        <tbody>
            <tr>
                <td class="main-info-table-res dob">Date of birth</td>
                <td class="dob"><div class="icon-div"><i class="far fa-calendar-alt icon-in-table"></i></div>
                11.06.1994 (24 lat)         </td>
            </tr>
            <tr>
                <td class="main-info-table-res">Phone</td>
                <td><div class="icon-div"><i class="far fa-mobile-android-alt icon-in-table"></i></div>
                <a href="tel:653984523">653984523</a></td>
            </tr>

            <tr>
            <td class="main-info-table-res">Date of registration</td>
            <td style="white-space: nowrap"><div class="icon-div"><i class="far fa-at icon-in-table"></i></div>
            11.07.2018</td>
            </tr>

        </tbody>
    </table></div>
        </div>
        </li>
 </ul>
JSFIDLE(JSIDLE):http://jsfiddle.net/z780Lgqa/1/

以下是生成此内容的部分代码:https://pastebin.com/raw/j9vZs9su

下面是“预览外观”页面:

http://tnijurl.com/070543be664d/

上面的代码已粘贴在页面中。为什么这不起作用?怎么了?我受不了。有人能帮我吗?

非常感谢。

1 个回复
最合适的回答,由SO网友:kibus90 整理而成

好吧,我找到了解决办法。。。问题是因为加载了AJAX的内容

如果我使用此选项,则我的代码有效:

jQuery(document).ajaxComplete(function($){
jQuery(document).ready(function($){
$(".more-info").click(function(){
$(this).closest(\'.resume_list\').find(\'.main-box-info\').slideToggle();
   $(this).closest(\'.more-info\').find(\'span.click-show-notes, span.click-hide-notes\').toggle();
});
});
})

结束

相关推荐

使用AJAX发出POST请求会返回400错误(不使用jQuery)

该网站有一个带有搜索字段和类别复选框的博客页面。搜索某个内容或选中/取消选中某个类别会启动AJAX请求,以根据搜索/类别获取帖子,然后将这些结果填充到页面上的列表中。Currently this functionality works with jQuery, but my attempts to write it in plain JS are failing with 400 errors.以下是对此的jQuery:$.ajax({ url: Knuckle.ajaxurl,