将插入符Div添加到下拉菜单中

时间:2016-11-13 19:39:56

标签: jquery html css wordpress

我有一个问题。是的,我不能添加div"插入符号"到我的下拉菜单,在只有孩子的菜单上。有我的代码



$(document).ready(function(){
	if ($('.mobile-menu li:has(sub-menu)'))
	{	
  $('.mobile-menu li').parent('.ul').append('<div class=caret></div>');
	}
	else
	{
		alert('function is not working');
	}
					
				});
&#13;
/************************************************
Mobile-Menu Style
************************************************/
.mobile-show{
dispay:block;
}
.mobile-menu{
position:fixed;
width:70%;
height:100%;
background:white;
z-index:1000;
}
.mobile-menu.sub-menu{
position:absolute;
}
.mobile-menu ul{
top:10.2%;
color:black;
position:relative;
text-align:left;
font-weight:bold;
}
.mobile-menu li a {
display: block;
padding: 4% 0;
border-bottom:1px solid black;
}
.mobile-menu > ul> li:hover > a, .mobile-menu > ul> li:hover > .sub-menu > li:hover > a, .mobile-menu > ul .sub-menu  .sub-menu > li:hover > a{
background-color: #111;
color: #fff;
}
.mobile-menu ul li ul{
height:100%;
width:100%;
display:none;
background:#fff;
border:none;
position:relative;
}
.mobile-menu ul li:hover ul{
display:block;
}
/************************************************
Caret Design
************************************************/
.caret {
    width:100%;
height:auto;
    position:relative;
    border-bottom:1px solid #000;
}

.caret:before {
    content:"";
    border-color: #FFF transparent transparent transparent;
    border-style:solid;
    border-width:12px;
    width:0;
    height:0;
    position:absolute;
    bottom:-24px;
    left:45%;
    z-index:1020;
}

.caret:after {
    content:"";
    border-color: #000 transparent transparent transparent;
    border-style:solid;
    border-width:12px;
    width:0;
    height:0;
    position:absolute;
    bottom:-25px;
    left:45%;
}
&#13;
<div class="mobile-menu">
      <ul class="mobile-menu-ul">
       <div class="caret"></div>
              <?php wp_nav_menu(array (                  
            'theme_location'=> 'new-menu',
			'container' => '', 
			'items_wrap' => '%3$s' 
                                                )); ?>
&#13;
&#13;
&#13;

我对此非常陌生,尤其是jQuery。这就是我的菜单现在的样子:http://prntscr.com/d6txgx菜单顶部是我想要的子元素时的样子在任何菜单中。目前底部是我的代码看起来像... 我很感激任何帮助!!谢谢! :)

1 个答案:

答案 0 :(得分:1)

如果它是正确的,您可以定位wordpress菜单类.caret并定位/************************************************ Mobile-Menu Style ************************************************/ .mobile-show{ dispay:block; } .mobile-menu{ position:fixed; width:70%; height:100%; background:white; z-index:1000; } .mobile-menu.sub-menu{ position:absolute; } .mobile-menu ul{ top:10.2%; color:black; position:relative; text-align:left; font-weight:bold; list-style: none; padding: 0; } .mobile-menu li a { display: block; position: relative; padding: 4% 0; border-bottom:1px solid black; } .mobile-menu > ul> li:hover > a, .mobile-menu > ul> li:hover > .sub-menu > li:hover > a, .mobile-menu > ul .sub-menu .sub-menu > li:hover > a{ background-color: #111; color: #fff; } .mobile-menu ul li.menu-item-has-children ul{ height:100%; width:100%; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; background:#fff; border:none; position:relative; } .mobile-menu ul li.menu-item-has-children:hover ul{ display:block; visibility: visible; opacity: 1; } .menu-item-has-children > a{ border-bottom:1px solid #000; } .menu-item-has-children > a:before { content:""; border-color:#FFF transparent transparent transparent; border-style:solid; border-width:12px; width:0; height:0; position:absolute; bottom:-24px; left:45%; z-index:1020; } .menu-item-has-children > a:after { content:""; border-color:#000 transparent transparent transparent; border-style:solid; border-width:12px; width:0; height:0; position:absolute; bottom:-25px; left:45%; } .mobile-menu ul li.menu-item-has-children:hover a:before{ border-color: transparent transparent #FFF transparent; bottom: 0; } .mobile-menu ul li.menu-item-has-children:hover a:after{ border-color: transparent transparent #000 transparent; bottom: 0; }上的所有css。

然后你不需要jQuery!

<div class="mobile-menu">
  <ul id="menu-top-menu" class="mobile-menu-ul">
    <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-35 dropdown">
      <a title="test page" href="http://wpbasis.com/test-page/" data-dropdown="dropdown" class="dropdown-toggle" aria-haspopup="true">test page <span class="caret"></span></a>
      <ul role="menu" class=" dropdown-menu">
        <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
          <a title="Checkout" href="http://wpbasis.com/checkout/">Checkout</a>
        </li>
        <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37">
          <a title="Cart" href="http://wpbasis.com/cart/">Cart</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
   #include <stdio.h>

    //Vertices represent the vertices of the graph

    //Color = {W,B,G}

    /*
     * W = White =>Means unvisited
     * B = Black =>Means visited
     * G = Gray =>Means discovered
     * colors and distances are stored in graph[i][0].color and graph[i][0].distance 
     * */

    struct Vertices{
        int data;
        char color;
        int distance;
    };

    struct node{
        int element;
        struct node *next;
    };

    /*
     * Here we check if vertex1 is adjacent to vertex2
     * Means graph[vertex1][vertex2].data !=0
     * */

    struct node *first = NULL;
    struct Vertices graph[8][8];
    int count = 0;

    void enqueue(int element){
        struct node *newNode,*currentNode,*prevNode;

        //Create a new Node
        newNode = (struct node*)malloc(sizeof(struct node));
        newNode->element = element;
        newNode->next = NULL;

        //First node
        if(first == NULL){
            first = newNode;
        }

        //Any other node
        else{
            currentNode = first;
            while(currentNode != NULL){
                prevNode = currentNode;
                currentNode = currentNode->next;
            }
            prevNode->next = newNode;
        }
    }

    int dequeue(){
        int element;
        element = first->element;
        first = first->next;
        return element;
    }

    void displayGraph(int totalVertices){
        int i,j;
        printf("\nGraph");
        for(i=0;i<totalVertices;i++){
            for(j=0;j<totalVertices;j++){
                printf("\nData = %d Color = %c Distance = %d",graph[i][j].data,graph[i][j].color,graph[i][j].distance);
            }
        }
    }

    void displayQueue(){
        printf("\nQueue");
        struct node *currentNode;
        currentNode = first;
        while(currentNode != NULL){
            printf("--> %d",currentNode->element);
            currentNode=currentNode->next;
        }
    }

    int main(){
        int totalVertices;
        printf("\n Enter total vertices");
        scanf("%d",&totalVertices);


        int i,j;
        for(i=0;i<totalVertices;i++){
            for(j=0;j<totalVertices;j++){
                printf("If %d adjacent to %d",(j+1),(i+1));
                printf("\nEnter 1 if yes. O if no");
                int value;
                scanf("%d",&value);
                graph[i][j].data=value;
            }
        }

        for(i=0;i<totalVertices;i++){
            graph[i][0].color='W';
        }

        printf("\nGraph input ends");

        //BFS begins here
        printf("\nEnter the vertex from which search begins");
        int source;
        scanf("%d",&source);
        source = source - 1;

        enqueue(source);

        graph[source][0].color='G';
        graph[source][0].distance=0;

        printf("\nBFS traversal");
        while(first != NULL){
            int currentVertex = dequeue();

            for(i=0;i<totalVertices;i++){
                if(graph[currentVertex][i].data!=0){
                    if(graph[i][0].color=='W'){
                        graph[i][0].color='G';
                        graph[i][0].distance = graph[currentVertex][0].distance+1;
                        enqueue(i);
                    }
                }
            }
            graph[currentVertex][0].color='B';
            int currentVertexName = currentVertex+1;
            printf("<-> %d",currentVertex);
        }

        return 0;   
    }