Question

我在页面顶部有3个单独的下拉菜单。

页面菜单
帐户下拉列表
购物车下拉列表

我为每个创建了单独的打开和关闭功能

function menu_open(){ 
                document.getElementById("myNav_overlay").style.height = "100%";
                document.getElementById("myNav").style.height = "100%";
                $('.menu-link').text("menu_open");
        }

   function menu_close() {
                document.getElementById("myNav_overlay").style.height = "0%";
                document.getElementById("myNav").style.height = "0%";
                $('.menu-link').text("menu");
        }

        function account_open(){ 
                document.getElementById("myAccount_overlay").style.height = "100%";
                document.getElementById("myAccount").style.height = "100%";
                $('.account-link').text("person");
        }

        function account_close() {
                document.getElementById("myAccount_overlay").style.height = "0%";
                document.getElementById("myAccount").style.height = "0%";
                $('.account-link').text("person");
        }

        function cart_open(){ 
                document.getElementById("myCart_overlay").style.height = "100%";
                document.getElementById("myCart").style.height = "100%";
                $('.cart-link').text("shopping_cart");
        }

        function cart_close() {
                document.getElementById("myCart_overlay").style.height = "0%";
                document.getElementById("myCart").style.height = "0%";
                $('.cart-link').text("shopping_cart");
        }

，然后使用3个单独的点击计数功能来确定菜单是否需要打开或关闭。

    $(function() {  
    var menuclickCount = 0;
    var accountclickCount = 0;
    var cartclickCount = 0;

    $('.menu-link').click(function () {
        if(menuclickCount%2==0){
            //do when open
              menu_open();
              account_close();
              cart_close();
        }else{
             //do when closed
             menu_close();
         }
        clickCount++;
    });

    $('.account-link').click(function () {
        if(accountclickCount%2==0){
            //do when open
              account_open();
              menu_close();
              cart_close();
        }else{
             //do when closed
             account_close();
         }
        accountclickCount++;
    });


    $('.cart-link').click(function () {
        if(cartclickCount%2==0){
            //do when open
              cart_open();
              menu_close();
              account_close();
        }else{
             //do when closed
             cart_close();
         }
        cartclickCount++;
    });


});

与必须要做的相比，这似乎很大，并且似乎有更好/更简单的方法可以做到。但老实说，不确定该如何完成。

是否最好保留这样的设置，使每个设置都单独控制并手动关闭另一个设置？或者，将它们组合成更健壮，更小的功能，然后仍根据需要对其进行控制是否更好？

如果最好组合成一个更简单的功能，该如何在仍打开和关闭每个下拉部分的位置进行操作？

我采用了1个工作函数，并对其进行了复制，以使此工作保持原样。因此，现在我很想知道这与行业标准和实用标准之间的比较。

HTML很简单。...

菜单内容

<div id="myNav_overlay" class="overlay_background"></div>
<div id="myNav" class="nav-overlay">
<div class="overlay-content">
MENU
</div>
</div>

帐户内容

<div id="myAccount_overlay" class="overlay_background"></div>
<div id="myAccount" class="account-overlay">
<div class="overlay-content">
ACCOUNT
</div>
</div>

购物车内容

<div id="myCart_overlay" class="overlay_background"></div>
<div id="myCart" class="cart-overlay">
<div class="overlay-content">
CART
</div>
</div>

Answer 1

无需过多地设置示例样式，就可以使用jQuery的奇特功能：

（1）在单击时，选择所有菜单容器（在我的示例中为.ddown类）

（2）将所有菜单容器恢复为默认高度零（通过删除具有新高度的.showMenu类）

（3）仅适用于单击的容器，请应用增加容器高度的样式。

import unittest
import time
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import threading


# This example will help us to open a video on youtube and skip the ads

options = webdriver.ChromeOptions() 

class ChromeTime(unittest.TestCase):

    def setUp(self):
        chrome_options = webdriver.ChromeOptions()
        chrome_options.add_argument('--no-sandbox')
        chrome_options.add_argument('--incognito')
        chrome_options.add_argument("disable-popup-blocking")
        #chrome_options.add_argument('--headless')
        self.driver = webdriver.Chrome("/Users/hvaandres/Desktop/Dev_Projects/QA_Testing/Project_Video/chromedriver", options=chrome_options) #/usr/local/bin/chromedriver - Linux Machine
        self.driver.maximize_window()  

    def testing3(self):
        driver_chrome = self.driver

        driver_chrome.get("https://youtube.com")
        print("Opening Youtube")
        driver_chrome.find_element_by_name("search_query").send_keys("peter mckinnon")
        print("Looking for the youtuber")
        driver_chrome.find_element_by_id("search-icon-legacy").click()
        print("Finally, we found your youtuber!")
        time.sleep(5)
        driver_chrome.find_element_by_class_name("style-scope ytd-vertical-list-renderer").click()
        print("Trying to open thee video that you would like to watch")
        time.sleep(10)
        driver_chrome.find_element_by_class_name("ytp-ad-skip-button-container").click()
        print("You're skipping the ads")
        time.sleep(10)
        driver_chrome.find_element_by_class_name("ytp-popup ytp-settings-menu").click()
        time.sleep(10)

        print("Initial Page Title is : %s" %driver_chrome.title)
        windows_before  = driver_chrome.current_window_handle
        print("First Window Handle is : %s" %windows_before)


# Anything declared in tearDown will be executed for all test cases
    def tearDown(self):
        # Close the browser. 
        self.driver.close()

if __name__ == "__main__":
    unittest.main()

$('.ddown').click(function(){
  $('.ddown').removeClass('showMenu');
  $(this).addClass('showMenu');
});

.container{height:100px;}
.ddown{display:inline-block;width:100px;border:1px solid #ccc;overflow:hidden;}
.mnuTitle{height:20px;}
.mnuContent{height:0;background:white;}

.showMenu{height:100px;background:palegreen;}

简化了控制3个单独下拉菜单的javascript点击计数菜单

1 个答案: