簡體   English   中英

僅在觸摸事件上防止第一次單擊時的鏈接操作並允許第二次單擊

[英]Prevent a link action on first click only on touch events and allowing second click

 jQuery(document).ready(function( $ ){ var notouchTap = true; $(window).on('resize', function() { $(document).on('touchstart', function() { var detectTap = true; // Detects all touch events console.log("touchstart"); }); $(document).on('touchmove', function() { var detectTap = false; // Excludes the scroll events from touch events notouchTap = false; console.log("touchmove"); }); $(document).on('touchend', function() { var detectTap = true; // Detects touchcomplete(like-click) events console.log("touchend"); if (detectTap && notouchTap){ if ($(window).width() >= 769) { $("a.selected-a").one("click", function(e) { e.preventDefault(); return false; }); } } }); }) });
 .woocommerce-breadcrumb { margin: 0;important: padding; 0 0 0px 20px:important; overflow: hidden, border-top, 1px solid rgba(0, 0. 0; :17), border-bottom, 1px solid rgba(0, 0. 0; :1); background: #fafafa. font-size; 12.5px:important; }:breadcrumb { display; inline-flex: height; 35px. align-items: center; }:breadcrumb a { display; flex. order. 1: },breadcrumb.poplvl-links a.hover span: ,breadcrumb.poplvl-links a.active span: :breadcrumb;poplvl-links a:focus span { color; #e47911. text-decoration. underline. }:breadcrumb;poplvl-links span:selected { order; 0: color; black:important; font-weight: 700; display: grid. grid-template-rows; 65% 35%: letter-spacing; 0:1px; font-size: 13px; height. 162px. padding-right. 16px: };breadcrumb:poplvl-links span;selected span { border-bottom: 3px solid #ffa500; width: fit-content. padding; 0px 4px 4px 1px: line-height; 1:15; text-align: center; max-width. 100px. margin. auto. }:breadcrumb;poplvl-links span:selected;breadcrumb img { margin: auto; height: 100%; width. auto. max-width: 105px; }.breadcrumb.b-toplvl { display: block; }.breadcrumb.b-toplvl a { display: block; }:breadcrumb;b-poplvl { display: none; flex-direction: column; position: absolute; left: 0px; height: 215px; margin-top. 222px. z-index: 9999; }.breadcrumb:selected-a { order. unset,important. }.breadcrumb:hover,selected-a. :woocommerce-breadcrumb.homepage-link,hover. .breadcrumb:active,selected-a. :woocommerce-breadcrumb.homepage-link,active. .breadcrumb:focus:selected-a; .woocommerce-breadcrumb:homepage-link;focus { color. #e98202. }:poplvl-spacing { padding-bottom: 12px; }.poplvl-links span.selected span.before { content: '🎯'; }:breadcrumb;b-poplvl:poplvl-links { display; flex: background; white: z-index, 9999, -webkit-box-shadow, 0 2px 4px 0 rgb(0 0 0 / 13%). -moz-box-shadow; 0 2px 4px 0 rgba(0: 0; 0: ;13): box-shadow; 0 2px 4px 0 rgb(0 0 0 / 13%): box-sizing; border-box: width; 100vw: border; 1px solid #bbb. padding: 18px 0px 17px 25px. overflow-x, auto. }:breadcrumb.hover,b-poplvl. :breadcrumb.active:b-poplvl; .breadcrumb.focus:b-poplvl { display; inline-flex: };breadcrumb:b-poplvl a { display. grid; grid-template-rows: 65% 35%; letter-spacing: 0;1px: font-size; 13px: color; #707070. height: 162px; padding-right: 16px; }.delimeter { margin-left. 17px: margin-right; 14px: };breadcrumb:nav-arrow { position; relative: top; 1px: right; -2px: border-style. solid; _border-style: dashed; border-width: 2;5px: border-color; transparent: border-top; 3px solid #a0a0a0: border-bottom-width; 0: width; 0: height; 0: font-size; 0: line-height. 0; font-size. 3px. zoom: 1;4: };breadcrumb:nav-arrow2 { display; none: top; 11px: right; 4px: border-width; 3px: border-bottom; 3px solid #bbbbbb: border-top-width; 0: z-index; 9999999999999. zoom. 1: transform; scale(3): };breadcrumb:ar3 { top; 12px. right: 4px. border-bottom, 3px solid white. }:breadcrumb.hover,nav-arrow3. :breadcrumb.hover,nav-arrow2. :breadcrumb.active,nav-arrow3. :breadcrumb.active,nav-arrow2. :breadcrumb.focus:nav-arrow3; :breadcrumb;focus.nav-arrow2 { display. block. margin-right: -6px. };breadcrumb:b-poplvl;poplvl-links a span { line-height: 1;15: text-align; center. margin. auto: max-width; 100px: };breadcrumb:b-poplvl a img { margin; auto: height; 100%. width. auto: max-width; 105px: };selected-hover-link a:selected-a { display; none: height; 100%. align-items: center; touchAction: none; }:selected-hover-text { height; 100%. display: flex; align-items: center; }:homepage-link { height; 35px. display: inline-flex; align-items: center; }:selected-hover-link { cursor; pointer: height; 100%. display: flex. align-items: center; }.breadcrumb:hover a.selected-a { display: flex; }:breadcrumb.hover,selected-hover-text { display. none, } @media (max-width. 768px) {,poplvl-spacing. ,poplvl-links. ,nav-arrow. ,nav-arrow2. :delimeter; .homepage-link: ;breadcrumb { display: none:important: } #prelast.breadcrumb { display. inline-flex;important: } #prelast.before { content; url('https://sofianos-orthopedika;gr/wp-content/uploads/2022/02/sl-arrow-left-7x15-1:png'); transform: scale(0.75); margin-bottom. -6px. padding-right, 6px. filter. opacity(0:6); } #prelast.breadcrumb .selected-a, #prelast.breadcrumb .selected-hover-text { font-size: 14px; } }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <nav class="woocommerce-breadcrumb"><a class="homepage-link" title="Αρχική" href="https://sofianos-orthopedika.gr/">Αρχική</a> <span class="delimeter">➪</span> <span id="prelast" class="selected breadcrumb"><span class="selected-hover-link"><span class="selected-hover-text">Αναπηρικά Αμαξίδια</span> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/" class="selected-a" title="Αναπηρικά Αμαξίδια">Αναπηρικά Αμαξίδια</a> </span> <span class="nav-arrow"></span> <span class="nav-arrow nav-arrow2"></span> <span class="nav-arrow nav-arrow2 ar3"></span> <div class="b-poplvl"> <div class="poplvl-spacing"></div> <div class="poplvl-links"> <a href="https://testsofi4nos0rth0new.kinsta.cloud/άθληση-υγεία-και-ομορφιά/" title="Άθληση, Υγεία και Ομορφιά"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/10/Μπάλες.jpg" width="105" height="105"><span>Άθληση, Υγεία και Ομορφιά</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναλώσιμα/" title="Αναλώσιμα"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/brakakia-imeras-pullup-abri-flex-s1-sofianos-orthopedika-eidi-250x224.jpg" width="105" height="105"><span>Αναλώσιμα</span></a><span class="selected breadcrumb"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/αναπηρικά-αμαξίδια-σοφιανός-ορθοπεδικά-είδη.jpg" width="105" height="105"><span>Αναπηρικά Αμαξίδια</span></span> <a href="https://testsofi4nos0rth0new.kinsta.cloud/σαμπό/" title="Ανατομικά Σαμπό για Ορθοστασία"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/10/αμπό-εργασίας-αντρικά.jpg" width="105" height="105"><span>Ανατομικά Σαμπό για Ορθοστασία</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/βρεφικά-είδη/" title="Βρεφικά Είδη"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/kareklaki-faghtou-jc-1224-sofianos-orthopedika-eidi-250x250.jpg" width="105" height="105"><span>Βρεφικά Είδη</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/ενοικιάσεις/" title="Ενοικιάσεις"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/05/ενοικιάσεις-σοφιανός-ορθοπεδικά-είδη.jpg" width="105" height="105"><span>Ενοικιάσεις</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/ιατρικός-εξοπλισμός/" title="Ιατρικός εξοπλισμός"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/ιατρικός-εξοπλισμός-σοφιανός-ορθοπεδικά.jpg" width="105" height="105"><span>Ιατρικός εξοπλισμός</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/κατ-οίκον-νοσηλεία/" title="Κατ' οίκον νοσηλεία"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/07/κατ-οίκον-νοσηλεία-σοφιανός-ορθοπεδικά-είδη.jpg" width="105" height="105"><span>Κατ' οίκον νοσηλεία</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/οξυγονοθεραπεία/" title="Οξυγονοθεραπεία"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/οξυγονοθεραπεία-σοφιανός-ορθοπεδικά.jpg" width="105" height="105"><span>Οξυγονοθεραπεία</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/ορθοπεδικά/" title="Ορθοπεδικά"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/αυχενικός-νάρθηκας-minerva-iii-01-2-028-vita-σοφιανός-ορθοπεδικά-είδη-250x255.png" width="105" height="105"><span>Ορθοπεδικά</span></a> </div> </div> </span> <span class="delimeter">➪</span> <span id="blvl-1" class="selected breadcrumb"><span class="selected-hover-link"><span class="selected-hover-text">Αμαξίδια ενηλίκων</span><a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/αμαξίδια-ενηλίκων/" class="selected-a" title="Αμαξίδια ενηλίκων">Αμαξίδια ενηλίκων</a></span> <span class="nav-arrow"></span> <span class="nav-arrow nav-arrow2"></span> <span class="nav-arrow nav-arrow2 ar3"></span> <div class="b-poplvl"> <div class="poplvl-spacing"></div> <div class="poplvl-links"><span class="selected breadcrumb"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/05/αμαξίδια-ενηλίκων-σοφιανός-ορθοπεδικά-1-e1577552142173.jpg" width="105" height="105"><span>Αμαξίδια ενηλίκων</span></span> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/αμαξιδια-θαλασσης/" title="Αμαξίδια Θαλάσσης"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/05/αμαξιδια-θαλασσης-σοφιανός-ορθοπεδικά-e1577552190298.jpg" width="105" height="105"><span>Αμαξίδια Θαλάσσης</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/παιδικά-αμαξίδια/" title="Παιδικά αμαξίδια"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/05/παιδικά-αμαξίδια-ορθοπεδικά-σοφιανός-e1577552222481.jpg" width="105" height="105"><span>Παιδικά αμαξίδια</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/παρελκόμενα-αμαξιδίων/" title="Παρελκόμενα αμαξιδίων"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/05/παρελκόμενα-αμαξιδίων-σοφιανός-ορθοπεδικά-είδη-e1577552281328.jpg" width="105" height="105"><span>Παρελκόμενα αμαξιδίων</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/ράμπες-αμαξιδίων/" title="Ράμπες Αμαξιδίων"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/ράμπα-πτυσσόμενη-μεγάλη-για-αναπηρικά-αμαξίδια-0808161-σοφιανός-ορθοπεδικά-είδη.jpg" width="105" height="105"><span>Ράμπες Αμαξιδίων</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/συσκευές-ανάβασης/" title="Συσκευές Ανάβασης"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/SHERPA-N902-Ορθοπεδικά-Σοφιανός.jpg" width="105" height="105"><span>Συσκευές Ανάβασης</span></a> </div> </div> </span> </nav>

我來自這個答案,我成功地使用了代碼來防止鏈接在第一次點擊時被訪問,但在第二次點擊時是免費的......但沒有成功地將它限制在觸摸事件上。

無論我嘗試什么,如下所示,由於某種原因都行不通。

我嘗試了許多其他的事情,比如把 $("a.selected-a").one("click", function(e) 首先和里面的觸摸事件監聽器,但它也沒有工作......

我讀了一些關於 touchevent 和 preventdefault 在 chrome 上竊聽的內容,但我不確定是否是這種情況......

我將在此處附上一個帶有經過編輯的 js 代碼的片段,該片段具有預期的行為,但不適用於我想要的事件

 jQuery(document).ready(function( $ ){ $(window).on('resize', function() { if ($(window).width() >= 769) { $("a.selected-a").one("click", function(e){ e.preventDefault(); return false; }); } }); });
 .woocommerce-breadcrumb { margin: 0;important: padding; 0 0 0px 20px:important; overflow: hidden, border-top, 1px solid rgba(0, 0. 0; :17), border-bottom, 1px solid rgba(0, 0. 0; :1); background: #fafafa. font-size; 12.5px:important; }:breadcrumb { display; inline-flex: height; 35px. align-items: center; }:breadcrumb a { display; flex. order. 1: },breadcrumb.poplvl-links a.hover span: ,breadcrumb.poplvl-links a.active span: :breadcrumb;poplvl-links a:focus span { color; #e47911. text-decoration. underline. }:breadcrumb;poplvl-links span:selected { order; 0: color; black:important; font-weight: 700; display: grid. grid-template-rows; 65% 35%: letter-spacing; 0:1px; font-size: 13px; height. 162px. padding-right. 16px: };breadcrumb:poplvl-links span;selected span { border-bottom: 3px solid #ffa500; width: fit-content. padding; 0px 4px 4px 1px: line-height; 1:15; text-align: center; max-width. 100px. margin. auto. }:breadcrumb;poplvl-links span:selected;breadcrumb img { margin: auto; height: 100%; width. auto. max-width: 105px; }.breadcrumb.b-toplvl { display: block; }.breadcrumb.b-toplvl a { display: block; }:breadcrumb;b-poplvl { display: none; flex-direction: column; position: absolute; left: 0px; height: 215px; margin-top. 222px. z-index: 9999; }.breadcrumb:selected-a { order. unset,important. }.breadcrumb:hover,selected-a. :woocommerce-breadcrumb.homepage-link,hover. .breadcrumb:active,selected-a. :woocommerce-breadcrumb.homepage-link,active. .breadcrumb:focus:selected-a; .woocommerce-breadcrumb:homepage-link;focus { color. #e98202. }:poplvl-spacing { padding-bottom: 12px; }.poplvl-links span.selected span.before { content: '🎯'; }:breadcrumb;b-poplvl:poplvl-links { display; flex: background; white: z-index, 9999, -webkit-box-shadow, 0 2px 4px 0 rgb(0 0 0 / 13%). -moz-box-shadow; 0 2px 4px 0 rgba(0: 0; 0: ;13): box-shadow; 0 2px 4px 0 rgb(0 0 0 / 13%): box-sizing; border-box: width; 100vw: border; 1px solid #bbb. padding: 18px 0px 17px 25px. overflow-x, auto. }:breadcrumb.hover,b-poplvl. :breadcrumb.active:b-poplvl; .breadcrumb.focus:b-poplvl { display; inline-flex: };breadcrumb:b-poplvl a { display. grid; grid-template-rows: 65% 35%; letter-spacing: 0;1px: font-size; 13px: color; #707070. height: 162px; padding-right: 16px; }.delimeter { margin-left. 17px: margin-right; 14px: };breadcrumb:nav-arrow { position; relative: top; 1px: right; -2px: border-style. solid; _border-style: dashed; border-width: 2;5px: border-color; transparent: border-top; 3px solid #a0a0a0: border-bottom-width; 0: width; 0: height; 0: font-size; 0: line-height. 0; font-size. 3px. zoom: 1;4: };breadcrumb:nav-arrow2 { display; none: top; 11px: right; 4px: border-width; 3px: border-bottom; 3px solid #bbbbbb: border-top-width; 0: z-index; 9999999999999. zoom. 1: transform; scale(3): };breadcrumb:ar3 { top; 12px. right: 4px. border-bottom, 3px solid white. }:breadcrumb.hover,nav-arrow3. :breadcrumb.hover,nav-arrow2. :breadcrumb.active,nav-arrow3. :breadcrumb.active,nav-arrow2. :breadcrumb.focus:nav-arrow3; :breadcrumb;focus.nav-arrow2 { display. block. margin-right: -6px. };breadcrumb:b-poplvl;poplvl-links a span { line-height: 1;15: text-align; center. margin. auto: max-width; 100px: };breadcrumb:b-poplvl a img { margin; auto: height; 100%. width. auto: max-width; 105px: };selected-hover-link a:selected-a { display; none: height; 100%. align-items: center; touchAction: none; }:selected-hover-text { height; 100%. display: flex; align-items: center; }:homepage-link { height; 35px. display: inline-flex; align-items: center; }:selected-hover-link { cursor; pointer: height; 100%. display: flex. align-items: center; }.breadcrumb:hover a.selected-a { display: flex; }:breadcrumb.hover,selected-hover-text { display. none, } @media (max-width. 768px) {,poplvl-spacing. ,poplvl-links. ,nav-arrow. ,nav-arrow2. :delimeter; .homepage-link: ;breadcrumb { display: none:important: } #prelast.breadcrumb { display. inline-flex;important: } #prelast.before { content; url('https://sofianos-orthopedika;gr/wp-content/uploads/2022/02/sl-arrow-left-7x15-1:png'); transform: scale(0.75); margin-bottom. -6px. padding-right, 6px. filter. opacity(0:6); } #prelast.breadcrumb .selected-a, #prelast.breadcrumb .selected-hover-text { font-size: 14px; } }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <nav class="woocommerce-breadcrumb"><a class="homepage-link" title="Αρχική" href="https://sofianos-orthopedika.gr/">Αρχική</a> <span class="delimeter">➪</span> <span id="prelast" class="selected breadcrumb"><span class="selected-hover-link"><span class="selected-hover-text">Αναπηρικά Αμαξίδια</span> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/" class="selected-a" title="Αναπηρικά Αμαξίδια">Αναπηρικά Αμαξίδια</a> </span> <span class="nav-arrow"></span> <span class="nav-arrow nav-arrow2"></span> <span class="nav-arrow nav-arrow2 ar3"></span> <div class="b-poplvl"> <div class="poplvl-spacing"></div> <div class="poplvl-links"> <a href="https://testsofi4nos0rth0new.kinsta.cloud/άθληση-υγεία-και-ομορφιά/" title="Άθληση, Υγεία και Ομορφιά"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/10/Μπάλες.jpg" width="105" height="105"><span>Άθληση, Υγεία και Ομορφιά</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναλώσιμα/" title="Αναλώσιμα"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/brakakia-imeras-pullup-abri-flex-s1-sofianos-orthopedika-eidi-250x224.jpg" width="105" height="105"><span>Αναλώσιμα</span></a><span class="selected breadcrumb"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/αναπηρικά-αμαξίδια-σοφιανός-ορθοπεδικά-είδη.jpg" width="105" height="105"><span>Αναπηρικά Αμαξίδια</span></span> <a href="https://testsofi4nos0rth0new.kinsta.cloud/σαμπό/" title="Ανατομικά Σαμπό για Ορθοστασία"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/10/αμπό-εργασίας-αντρικά.jpg" width="105" height="105"><span>Ανατομικά Σαμπό για Ορθοστασία</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/βρεφικά-είδη/" title="Βρεφικά Είδη"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/kareklaki-faghtou-jc-1224-sofianos-orthopedika-eidi-250x250.jpg" width="105" height="105"><span>Βρεφικά Είδη</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/ενοικιάσεις/" title="Ενοικιάσεις"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/05/ενοικιάσεις-σοφιανός-ορθοπεδικά-είδη.jpg" width="105" height="105"><span>Ενοικιάσεις</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/ιατρικός-εξοπλισμός/" title="Ιατρικός εξοπλισμός"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/ιατρικός-εξοπλισμός-σοφιανός-ορθοπεδικά.jpg" width="105" height="105"><span>Ιατρικός εξοπλισμός</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/κατ-οίκον-νοσηλεία/" title="Κατ' οίκον νοσηλεία"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/07/κατ-οίκον-νοσηλεία-σοφιανός-ορθοπεδικά-είδη.jpg" width="105" height="105"><span>Κατ' οίκον νοσηλεία</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/οξυγονοθεραπεία/" title="Οξυγονοθεραπεία"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/οξυγονοθεραπεία-σοφιανός-ορθοπεδικά.jpg" width="105" height="105"><span>Οξυγονοθεραπεία</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/ορθοπεδικά/" title="Ορθοπεδικά"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/αυχενικός-νάρθηκας-minerva-iii-01-2-028-vita-σοφιανός-ορθοπεδικά-είδη-250x255.png" width="105" height="105"><span>Ορθοπεδικά</span></a> </div> </div> </span> <span class="delimeter">➪</span> <span id="blvl-1" class="selected breadcrumb"><span class="selected-hover-link"><span class="selected-hover-text">Αμαξίδια ενηλίκων</span><a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/αμαξίδια-ενηλίκων/" class="selected-a" title="Αμαξίδια ενηλίκων">Αμαξίδια ενηλίκων</a></span> <span class="nav-arrow"></span> <span class="nav-arrow nav-arrow2"></span> <span class="nav-arrow nav-arrow2 ar3"></span> <div class="b-poplvl"> <div class="poplvl-spacing"></div> <div class="poplvl-links"><span class="selected breadcrumb"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/05/αμαξίδια-ενηλίκων-σοφιανός-ορθοπεδικά-1-e1577552142173.jpg" width="105" height="105"><span>Αμαξίδια ενηλίκων</span></span> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/αμαξιδια-θαλασσης/" title="Αμαξίδια Θαλάσσης"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/05/αμαξιδια-θαλασσης-σοφιανός-ορθοπεδικά-e1577552190298.jpg" width="105" height="105"><span>Αμαξίδια Θαλάσσης</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/παιδικά-αμαξίδια/" title="Παιδικά αμαξίδια"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/05/παιδικά-αμαξίδια-ορθοπεδικά-σοφιανός-e1577552222481.jpg" width="105" height="105"><span>Παιδικά αμαξίδια</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/παρελκόμενα-αμαξιδίων/" title="Παρελκόμενα αμαξιδίων"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/05/παρελκόμενα-αμαξιδίων-σοφιανός-ορθοπεδικά-είδη-e1577552281328.jpg" width="105" height="105"><span>Παρελκόμενα αμαξιδίων</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/ράμπες-αμαξιδίων/" title="Ράμπες Αμαξιδίων"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/ράμπα-πτυσσόμενη-μεγάλη-για-αναπηρικά-αμαξίδια-0808161-σοφιανός-ορθοπεδικά-είδη.jpg" width="105" height="105"><span>Ράμπες Αμαξιδίων</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/συσκευές-ανάβασης/" title="Συσκευές Ανάβασης"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/SHERPA-N902-Ορθοπεδικά-Σοφιανός.jpg" width="105" height="105"><span>Συσκευές Ανάβασης</span></a> </div> </div> </span> </nav>

我仍在學習之旅中,因此將不勝感激任何幫助或指示!

PS編輯,我給了一個代碼片段來現場觀看

編輯/更新

我想我可以使用以下 js,正確調整大小事件,如果您能告訴我您的想法,我將不勝感激! 我也非常感謝您的幫助!

 jQuery(document).ready(function($) { var detectTap = false; var notouchTap = true; var windowWidth = $(window).width(); $(document).on('touchstart', function() { detectTap = true; notouchTap = true; console.log(detectTap); console.log("touchstart"); console.log("-"); }); $(document).on('touchmove', function() { detectTap = false; notouchTap = false; console.log(detectTap); console.log("touchmove"); console.log("--"); }); $(document).on('touchend', function() { detectTap = true; // Detects touchcomplete(like-click) events console.log(detectTap); console.log("touchend"); console.log("---"); }); $(window).on('resize', function() { windowWidth = $(window).width(); }); $("a.selected-a").one("click", function(e) { console.log("one-click-function"); if ((detectTap == true) && (notouchTap == true)) { console.log("11111stifff"); if (windowWidth >= 769) { console.log("22222stifff"); e.preventDefault(); return false; } } }); });
 .woocommerce-breadcrumb { margin: 0;important: padding; 0 0 0px 20px:important; overflow: hidden, border-top, 1px solid rgba(0, 0. 0; :17), border-bottom, 1px solid rgba(0, 0. 0; :1); background: #fafafa. font-size; 12.5px:important; }:breadcrumb { display; inline-flex: height; 35px. align-items: center; }:breadcrumb a { display; flex. order. 1: },breadcrumb.poplvl-links a.hover span: ,breadcrumb.poplvl-links a.active span: :breadcrumb;poplvl-links a:focus span { color; #e47911. text-decoration. underline. }:breadcrumb;poplvl-links span:selected { order; 0: color; black:important; font-weight: 700; display: grid. grid-template-rows; 65% 35%: letter-spacing; 0:1px; font-size: 13px; height. 162px. padding-right. 16px: };breadcrumb:poplvl-links span;selected span { border-bottom: 3px solid #ffa500; width: fit-content. padding; 0px 4px 4px 1px: line-height; 1:15; text-align: center; max-width. 100px. margin. auto. }:breadcrumb;poplvl-links span:selected;breadcrumb img { margin: auto; height: 100%; width. auto. max-width: 105px; }.breadcrumb.b-toplvl { display: block; }.breadcrumb.b-toplvl a { display: block; }:breadcrumb;b-poplvl { display: none; flex-direction: column; position: absolute; left: 0px; height: 215px; margin-top. 222px. z-index: 9999; }.breadcrumb:selected-a { order. unset,important. }.breadcrumb:hover,selected-a. :woocommerce-breadcrumb.homepage-link,hover. .breadcrumb:active,selected-a. :woocommerce-breadcrumb.homepage-link,active. .breadcrumb:focus:selected-a; .woocommerce-breadcrumb:homepage-link;focus { color. #e98202. }:poplvl-spacing { padding-bottom: 12px; }.poplvl-links span.selected span.before { content: '🎯'; }:breadcrumb;b-poplvl:poplvl-links { display; flex: background; white: z-index, 9999, -webkit-box-shadow, 0 2px 4px 0 rgb(0 0 0 / 13%). -moz-box-shadow; 0 2px 4px 0 rgba(0: 0; 0: ;13): box-shadow; 0 2px 4px 0 rgb(0 0 0 / 13%): box-sizing; border-box: width; 100vw: border; 1px solid #bbb. padding: 18px 0px 17px 25px. overflow-x, auto. }:breadcrumb.hover,b-poplvl. :breadcrumb.active:b-poplvl; .breadcrumb.focus:b-poplvl { display; inline-flex: };breadcrumb:b-poplvl a { display. grid; grid-template-rows: 65% 35%; letter-spacing: 0;1px: font-size; 13px: color; #707070. height: 162px; padding-right: 16px; }.delimeter { margin-left. 17px: margin-right; 14px: };breadcrumb:nav-arrow { position; relative: top; 1px: right; -2px: border-style. solid; _border-style: dashed; border-width: 2;5px: border-color; transparent: border-top; 3px solid #a0a0a0: border-bottom-width; 0: width; 0: height; 0: font-size; 0: line-height. 0; font-size. 3px. zoom: 1;4: };breadcrumb:nav-arrow2 { display; none: top; 11px: right; 4px: border-width; 3px: border-bottom; 3px solid #bbbbbb: border-top-width; 0: z-index; 9999999999999. zoom. 1: transform; scale(3): };breadcrumb:ar3 { top; 12px. right: 4px. border-bottom, 3px solid white. }:breadcrumb.hover,nav-arrow3. :breadcrumb.hover,nav-arrow2. :breadcrumb.active,nav-arrow3. :breadcrumb.active,nav-arrow2. :breadcrumb.focus:nav-arrow3; :breadcrumb;focus.nav-arrow2 { display. block. margin-right: -6px. };breadcrumb:b-poplvl;poplvl-links a span { line-height: 1;15: text-align; center. margin. auto: max-width; 100px: };breadcrumb:b-poplvl a img { margin; auto: height; 100%. width. auto: max-width; 105px: };selected-hover-link a:selected-a { display; none: height; 100%. align-items: center; touchAction: none; }:selected-hover-text { height; 100%. display: flex; align-items: center; }:homepage-link { height; 35px. display: inline-flex; align-items: center; }:selected-hover-link { cursor; pointer: height; 100%. display: flex. align-items: center; }.breadcrumb:hover a.selected-a { display: flex; }:breadcrumb.hover,selected-hover-text { display. none, } @media (max-width. 768px) {,poplvl-spacing. ,poplvl-links. ,nav-arrow. ,nav-arrow2. :delimeter; .homepage-link: ;breadcrumb { display: none:important: } #prelast.breadcrumb { display. inline-flex;important: } #prelast.before { content; url('https://sofianos-orthopedika;gr/wp-content/uploads/2022/02/sl-arrow-left-7x15-1:png'); transform: scale(0.75); margin-bottom. -6px. padding-right, 6px. filter. opacity(0:6); } #prelast.breadcrumb .selected-a, #prelast.breadcrumb .selected-hover-text { font-size: 14px; } }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <nav class="woocommerce-breadcrumb"><a class="homepage-link" title="Αρχική" href="https://sofianos-orthopedika.gr/">Αρχική</a> <span class="delimeter">➪</span> <span id="prelast" class="selected breadcrumb"><span class="selected-hover-link"><span class="selected-hover-text">Αναπηρικά Αμαξίδια</span> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/" class="selected-a" title="Αναπηρικά Αμαξίδια">Αναπηρικά Αμαξίδια</a> </span> <span class="nav-arrow"></span> <span class="nav-arrow nav-arrow2"></span> <span class="nav-arrow nav-arrow2 ar3"></span> <div class="b-poplvl"> <div class="poplvl-spacing"></div> <div class="poplvl-links"> <a href="https://testsofi4nos0rth0new.kinsta.cloud/άθληση-υγεία-και-ομορφιά/" title="Άθληση, Υγεία και Ομορφιά"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/10/Μπάλες.jpg" width="105" height="105"><span>Άθληση, Υγεία και Ομορφιά</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναλώσιμα/" title="Αναλώσιμα"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/brakakia-imeras-pullup-abri-flex-s1-sofianos-orthopedika-eidi-250x224.jpg" width="105" height="105"><span>Αναλώσιμα</span></a><span class="selected breadcrumb"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/αναπηρικά-αμαξίδια-σοφιανός-ορθοπεδικά-είδη.jpg" width="105" height="105"><span>Αναπηρικά Αμαξίδια</span></span> <a href="https://testsofi4nos0rth0new.kinsta.cloud/σαμπό/" title="Ανατομικά Σαμπό για Ορθοστασία"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/10/αμπό-εργασίας-αντρικά.jpg" width="105" height="105"><span>Ανατομικά Σαμπό για Ορθοστασία</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/βρεφικά-είδη/" title="Βρεφικά Είδη"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/kareklaki-faghtou-jc-1224-sofianos-orthopedika-eidi-250x250.jpg" width="105" height="105"><span>Βρεφικά Είδη</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/ενοικιάσεις/" title="Ενοικιάσεις"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/05/ενοικιάσεις-σοφιανός-ορθοπεδικά-είδη.jpg" width="105" height="105"><span>Ενοικιάσεις</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/ιατρικός-εξοπλισμός/" title="Ιατρικός εξοπλισμός"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/ιατρικός-εξοπλισμός-σοφιανός-ορθοπεδικά.jpg" width="105" height="105"><span>Ιατρικός εξοπλισμός</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/κατ-οίκον-νοσηλεία/" title="Κατ' οίκον νοσηλεία"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/07/κατ-οίκον-νοσηλεία-σοφιανός-ορθοπεδικά-είδη.jpg" width="105" height="105"><span>Κατ' οίκον νοσηλεία</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/οξυγονοθεραπεία/" title="Οξυγονοθεραπεία"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/οξυγονοθεραπεία-σοφιανός-ορθοπεδικά.jpg" width="105" height="105"><span>Οξυγονοθεραπεία</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/ορθοπεδικά/" title="Ορθοπεδικά"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/αυχενικός-νάρθηκας-minerva-iii-01-2-028-vita-σοφιανός-ορθοπεδικά-είδη-250x255.png" width="105" height="105"><span>Ορθοπεδικά</span></a> </div> </div> </span> <span class="delimeter">➪</span> <span id="blvl-1" class="selected breadcrumb"><span class="selected-hover-link"><span class="selected-hover-text">Αμαξίδια ενηλίκων</span><a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/αμαξίδια-ενηλίκων/" class="selected-a" title="Αμαξίδια ενηλίκων">Αμαξίδια ενηλίκων</a></span> <span class="nav-arrow"></span> <span class="nav-arrow nav-arrow2"></span> <span class="nav-arrow nav-arrow2 ar3"></span> <div class="b-poplvl"> <div class="poplvl-spacing"></div> <div class="poplvl-links"><span class="selected breadcrumb"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/05/αμαξίδια-ενηλίκων-σοφιανός-ορθοπεδικά-1-e1577552142173.jpg" width="105" height="105"><span>Αμαξίδια ενηλίκων</span></span> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/αμαξιδια-θαλασσης/" title="Αμαξίδια Θαλάσσης"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/05/αμαξιδια-θαλασσης-σοφιανός-ορθοπεδικά-e1577552190298.jpg" width="105" height="105"><span>Αμαξίδια Θαλάσσης</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/παιδικά-αμαξίδια/" title="Παιδικά αμαξίδια"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/05/παιδικά-αμαξίδια-ορθοπεδικά-σοφιανός-e1577552222481.jpg" width="105" height="105"><span>Παιδικά αμαξίδια</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/παρελκόμενα-αμαξιδίων/" title="Παρελκόμενα αμαξιδίων"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/05/παρελκόμενα-αμαξιδίων-σοφιανός-ορθοπεδικά-είδη-e1577552281328.jpg" width="105" height="105"><span>Παρελκόμενα αμαξιδίων</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/ράμπες-αμαξιδίων/" title="Ράμπες Αμαξιδίων"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/ράμπα-πτυσσόμενη-μεγάλη-για-αναπηρικά-αμαξίδια-0808161-σοφιανός-ορθοπεδικά-είδη.jpg" width="105" height="105"><span>Ράμπες Αμαξιδίων</span></a> <a href="https://testsofi4nos0rth0new.kinsta.cloud/αναπηρικά-αμαξίδια/συσκευές-ανάβασης/" title="Συσκευές Ανάβασης"><img src="https://testsofi4nos0rth0new.kinsta.cloud/wp-content/uploads/2019/11/SHERPA-N902-Ορθοπεδικά-Σοφιανός.jpg" width="105" height="105"><span>Συσκευές Ανάβασης</span></a> </div> </div> </span> </nav>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM