时间戳

首页 > 解决方案 > Yii2 - 单击按钮时显示和隐藏 div 有问题

javascript - Yii2 - 单击按钮时显示和隐藏 div 有问题

问题描述

我试图在按钮单击时隐藏和显示 div。默认情况下，我隐藏 div。当我单击按钮时，它最初可以工作。但我观察到几秒钟后，div 会自行隐藏或显示而无需单击按钮。

按钮

    <div class="col-xs-12 col-sm-12 left-padding">
        <?= Html::a('<i class="fa fa-search-plus"></i>'.Yii::t('app', ' Display Advanced Search'), [''], ['class' => 'btn btn-block btn-warning', 'onclick' => "advancedSearch()"]) ?>
    </div>

Div 隐藏或显示

    <div id="toggleSearch" class="col-xs-12" style="display:none">
    <div class="box"> 
        <div class="box-body table-responsive">
            <div class="col-xs-12">
                <h4><strong><u>Advanced Search</u></strong></h4>
            </div>
   <?php $form = ActiveForm::begin([
       'enableAjaxValidation' => false,
   'method' => 'get']); ?>
<div class="col-xs-12 col-lg-12 no-padding"> 
    <div class="col-xs-12 col-sm-6 col-lg-6">
          <?= $form->field($searchModel, 'zonal_office_id')->widget(Select2::classname(), [
                'data' => ArrayHelper::map(app\models\ZonalOffice::find()->all(),'id','zonal_office_name'),
                'language' => 'en',
                'options' => ['placeholder' => 'Select Zonal Office ...'],

             //   'disabled'=>'true',
                'pluginOptions' => [
                    'allowClear' => true
                ],
            ]); ?>        
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-6">
  	<?= $form->field($searchModel, 'state_name')->textInput(['maxlength' => 100, 'placeholder' => $searchModel->getAttributeLabel('state_name')]) ?>
    </div>   
</div>
<div class="col-xs-12 col-lg-12"> 
    <div class="form-group">
        <?= Html::submitButton('Click to Search', ['class' => 'btn btn-success']) ?>
    </div>
</div>

    <?php ActiveForm::end(); ?>  
</div>
</div>
</div>

Javascript

<script>
function advancedSearch() {
    var x = document.getElementById("toggleSearch");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>

我该怎么做才能解决问题。谢谢

标签： javascriptyii2

解决方案

原因

这是因为您将 url 参数分配为['']带有空字符串的数组，而不是带有javascript:void(0)or的字符串'#.'。

  • 当您提供它['']时，它将创建与您所在页面相同的 URL，这意味着如果您的视图加载到 URL 上http://example.com/dashboard/search，它将将相同的 URL 附加到锚点。类似地，提供空字符串而不是数组会将路由附加dashboard/search到href锚点。在您的情况下，它正在重新加载页面，这就是为什么您感觉它隐藏起来的原因，它实际上重新加载了页面并返回到初始状态。

为什么它会创建这些 URL？

调用进一步BaseHtml::a()调用Url::to($url);

  • static::toRoute($url, $scheme);如果 url 是一个数组['controller/action']或空的['']。
  • Yii::$app->getRequest()->getUrl();如果提供的 url 是空字符串''。
  • 或者如果不为空，则按原样添加字符串，例如javascript:void(0)或'#.'

因此，将您的代码更改为

解决方案 1

<?= Html::a('<i class="fa fa-search-plus"></i>' . Yii::t('app', ' Display Advanced Search'), '#.', ['class' => 'btn btn-block btn-warning', 'onclick' => "advancedSearch()"]) ?>

解决方案 2

或使用 jquery 绑定 javascript，但首先使用 name 向锚添加一个类，然后从锚advance_search中删除onclick属性。

<?= Html::a('<i class="fa fa-search-plus"></i>' . Yii::t('app', ' Display Advanced Search'), '#.', ['class' => 'advance_search btn btn-block btn-warning']) ?>

并在您的视图文件顶部添加以下内容

$js=<<< JS
        $("a.advance_search").on('click',function(e){
           e.preventDefault();
            var x = document.getElementById("toggleSearch");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        });
JS;
$this->registerJs($js,\yii\web\view::POS_READY);

推荐阅读