0

我在我的网站上使用 PHP、Smarty 和 jQuery。有显示和隐藏的功能

  • 表单上的元素。HTML 以及 jQuery 函数的代码如下： HTML 代码：

    <div class="c-mega-accord">
  <ol class="fnAccordion">
    <li>
      <a class="fnTrigger" href="#">Practice Sheet Basic Details <span></span></a>
      <div class="fnAccContent">
        <div class="c-grad-box">
          <div class="form-wrapper">
                {if $error_msg}<div class="error-info">{$error_msg.error_msgs}</div>{/if}

          <form name="manage_practice_sheet" id="manage_practice_sheet" action="practice_sheet.php" method="post">
            <input type="hidden" name="op" id="op" value="{$op}" /> 
          <input type="hidden" name="sheet_type" id="sheet_type" value="{$sheet_type}" /> 
          <input type="hidden" name="form_submitted" id="form_submitted" value="yes" /> 
          <input type="hidden" name="practice_sheet_id" id="practice_sheet_id" value="{$practice_sheet_id}" /> 
          <input type="hidden" name="hidden_practice_sheet_category_id" id="hidden_practice_sheet_category_id" value="{$practice_sheet_category_id}" /> 
          <input type="hidden" name="practice_sheet_id" id="practice_sheet_id" value="{$practice_sheet_id}" />
            <p class="form-info fl-right">* Mandatory fields</p>
            <ul>
              <li>
                <label>{'Category'|signal_on_error:$error_msg:'practice_sheet_category_id'}<span class="reqd">*</span></label>
                <div class="form-element">
                  <select name="practice_sheet_category_id" id="practice_sheet_category_id" <!--onChange="get_subcategory_by_category('{$control_url}modules/category/manage_category.php', this.value, 'get_subcategory_by_category', '#practice_sheet_sub_category_id');"-->  >
                    <option value="">Select</option>
                    {if $all_parent_categories}
                      {foreach from=$all_parent_categories item="parent_category"}
                    <option value="{$parent_category.category_id}" {if $data.practice_sheet_category_id==$parent_category.category_id || $practice_sheet_category_id==$parent_category.category_id} selected="selected"{/if}>{$parent_category.category_name}</option>
                      {/foreach}
                    {/if}
                  </select>
                </div>
              </li>
              <li>
                <label>{'Practice Sheet Name'|signal_on_error:$error_msg:'practice_sheet_name'}<span class="reqd">*</span></label>
                <div class="form-element">
                                <input class="" type="text" name="practice_sheet_name" id="practice_sheet_name" value="{$data.practice_sheet_name}" maxlength="50">   
                </div>
              </li>
              <li>
                <label>Display Date</label>
                <div class="form-element">
                  <input type="text" class="cal fl-left" id="frmDate" name="frmDate" value="{if $data.practice_sheet_display_date !='0' && $data.practice_sheet_display_date !=''}{$data.practice_sheet_display_date}{/if}">
                </div>
              </li>
              <li>
                <label>Practice Sheet For</label>
                <div class="form-element">
                <input class="" type="text" name="practice_sheet_for" id="practice_sheet_for" value="{$data.practice_sheet_for}" maxlength="50"> 
                </div>
              </li>
              <li>
                <label></label>
                <div class="form-element">
                <!--<input type="submit" value="{$submit_value}" class="c-btn" id="saveAddMore" name="submit">
                <input type="button" value="{$cancel_value}" class="c-gray-btn" id="done" name="done"  onclick="javascript:window.location.href='{$control_url}modules/practice_sheet/practice_sheet.php?op={$query_string}'"><br/>-->
                <span class="c-btn c-continus-btn"><input type="button" name="continus" id="continus" value="Continue" id="" name=""></span>
                <span class="c-gray-btn c-cancel-btn"><input type="button" value="Cancel" id="" name=""></span>
                </div>              
              </li>
            </ul>
            </form>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a class="fnTrigger" href="#">Select Category <span></span></a>
      <div class="fnAccContent">
        <div class="c-grad-box">
        </div>
      </div>
    </li>
  </ol>
</div>

    jQuery代码：

    function accordion(){

    var li = $(".fnAccordion > li"); 

    li.eq(0).addClass("active");
    li.children('.fnAccContent').not(':first').hide();

    $(".fnAccordion .fnTrigger").click(function(e){
        e.preventDefault();

        var numLi = $(this).parent('li').siblings();

        if(numLi.length > 0){

            $(this).parent('li').siblings().removeClass("active");
            var curState = $(this).parent().find(".fnAccContent").css("display");
            if(curState == "none"){
                $(".fnAccContent").slideUp();
                $(this).parent().addClass("active");
                $(this).parent().find(".fnAccContent").slideDown();
            }   

        }else{

            $(this).parent('li').toggleClass("active");
            $(this).parent().find(".fnAccContent").slideToggle();

        }


    })
}



$(document).ready(function(){
accordion();
})

    现在，当我单击以下两个元素时，隐藏/显示的功能可以正常工作：

    <a class="fnTrigger" href="#">Practice Sheet Basic Details <span></span></a>
      <a class="fnTrigger" href="#">Select Category <span></span></a>

    实际上我想让这个功能在继续按钮上工作（下面是它的 HTML 代码片段）：

    <input type="button" name="continus" id="continus" value="Continue" id="" name="">

    我试图通过应用fnTrigger类使其在 Continue 按钮上工作，但它没有工作。你能在这方面帮助我吗？提前致谢。

    • 4

    2 回答 2

    1

    如果您希望在两个类都存在时触发该功能，

    你用

    $(".fnAccordion .fnTrigger").click(function(){

//Your code here

});

    如果您希望在单击任一类的元素时触发该功能，请使用“，”分隔这些类。

    $(".fnAccordion, .fnTrigger").click(function(){

//Your code here

});
    于 2013-08-08T12:06:01.373 回答
    0

    您的检查仅检查fnTrigger类 INSIDE 具有fnAccordion类的元素

    $(".fnAccordion .fnTrigger").click(function(e){});

    您的按钮在fnAccordion类的元素内吗？

    于 2013-08-08T12:00:31.950 回答