Question

就像点击链接打开和关闭标签一样。您现在只需单击2次鼠标即可关闭该选项卡。帮助完成脚本。帮助解决问题。下面是html和js代码。这段代码会导致隐藏单位。

<ul class="user-panel">
                        <li><a class="login" href="#"><span>Кабинет</span></a>
                            <div id="hidden-login" style="display: none;">
                                <div class="row"> 
                                    <div class="col-md-6 col-login">
                                        <div class="title-login"> Вход в личный кабинет</div>
                                        <form action="  " class="form-user-login">
                                            <div class="title-form-login">Ваш Email или телефон</div>
                                            <input type=" ">
                                            <div class="title-form-login">Пароль</div>
                                            <input type=" ">
                                            <a href="#" class="pass-res">Напомнить пароль</a><br/>
                                            <button class="btn-login-vh">Войти</button>
                                        </form>
                                    </div>
                                    <div class="col-md-6 col-auc">
                                        <div class="title-auc"> Вход через</div>
                                        <a href="#" class="face-login"><i class="fa fa-facebook" aria-hidden="true"></i><span>Facebook</span></a>
                                        <a href="#" class="vk-login"><i class="fa fa-vk" aria-hidden="true"></i><span>ВКонтакте</span></a>
                                        <a href="#" class="gmail-login"><i class="fa fa-google" aria-hidden="true"></i><span>Google</span></a>
                                        <span class="liner"></span>
                                        <a class="btn-reg" href="registration.html">Зарегистрироваться</a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li> 
                        <a class="cart" href="#"><span>Корзина</span></a>

                            <div id="hidden-сart" style="display: none;">
                                <div class="title-cart"> Ваша корзина</div>
                                <div class="info-cart">Добавлено <span>3 товара</span> на сумму:<span>500 грн</span></div>
                                <div class="cart-item">
                                    <div class="cart-item-img">
                                        <img src="img/cart-iс-oformlenie.jpg" alt="">
                                    </div>
                                    <div class="cart-item-txt">
                                        <a href="">LG 105-201K [TV] оригинальный
                                        пульт ДУ оригинальный пульт
                                        ДУ</a>
                                    </div>
                                    <div class="cart-item-price">2 x 299.00 <span>грн</span></div>
                                </div>
                                    <div class="cart-item">
                                    <div class="cart-item-img">
                                        <img src="img/cart-iс-oformlenie.jpg" alt="">
                                    </div>
                                    <div class="cart-item-txt">
                                        <a href="">LG 105-201K [TV] оригинальный
                                        пульт ДУ оригинальный пульт
                                        ДУ</a>
                                    </div>
                                    <div class="cart-item-price">2 x 299.00 <span>грн</span></div>
                                </div>
                                    <div class="cart-item">
                                    <div class="cart-item-img">
                                            <img src="img/cart-iс-oformlenie.jpg" alt="">
                                    </div>
                                    <div class="cart-item-txt">
                                        <a href="">LG 105-201K [TV] оригинальный
                                        пульт ДУ оригинальный пульт
                                        ДУ</a>
                                    </div>
                                    <div class="cart-item-price">2 x 299.00 <span>грн</span></div>
                                </div>
                                <div class="go-cart"><button>ОФОРМИТЬ ЗАКАЗ</button></div>
                                <a href="shopping-cart.html" class="link-gocart">Перейти в корзину</a>
                            </div>
                        </li>
                    </ul>



$('.user-panel > li > a').click(function(){ 
$('.user-panel > li > a').removeClass('active'); 
$('.user-panel > li > a').next().css('display', 'none'); 
$(this).addClass('active'); 
if($('.user-panel > li > a').hasClass('active')) { 
$(this).next().css('display', 'block'); 
} 
return false; 
}); 

$('.user-panel > li > a').on('dblclick',function(){ 
$(this).next().css('display', 'none'); 
$(this).removeClass('active'); 
});

Answer 1

将您的JavaScript更改为：

$('.user-panel > li > a').click(function() {
  var $this = $(this);
  if ( $this.hasClass('active') ) {
    makeHidden($this);   
  } else {
    $currentlyActive = $('.user-panel > li > a.active');
    makeHidden($currentlyActive);
    makeActive($this);
  }
});  

function makeActive($el) {
  $el.addClass('active');
  $el.next().css('display', 'block');  
}

function makeHidden($el) {
  $el.removeClass('active');
  $el.next().css('display', 'none');
}

可以找到一个工作示例here。

说明：
你有两个不同的事件处理程序：

$('.user-panel > li > a').click(function(){...
这个处理打开被点击的项目并关闭另一个项目。

$('.user-panel > li > a').on('dblclick',function(){ ...
这个处理关闭双击的项目。

在我的版本中，我将它们合并到一个事件处理程序中，该处理程序检查所单击项目的状态，然后根据它是否具有“活动”类来确定需要执行的操作。

就像点击链接打开和关闭标签一样

1 个答案: