Question

我想显示某个div onclick of anchor，然后我想再次隐藏div onclick of anchor，这是我的代码：

jQuery('.mycart').click(function(e){

            e.preventDefault();
            var target = jQuery(".basket");

            if(target.is(':visible'))

                jQuery('.basket').css('cssText', 'display: none !important');

            else

                jQuery('.basket').css('cssText', 'display: block !important');
        });

jQuery(document).mouseup(function (e){
        var container =jQuery(".basket");

        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            container.hide();
        }
    });

HTML：

<a class="cart mycart" href="#">My Cart</a>
<div class="basket">
<span class="callout-arrow"></span>
<div class="basketcount"><span>5</span></div>
   <button type="button" class="checkoutbtn">checkout</button>
</div>

div显示成功点击，但它不会再次隐藏。问题是由用户在其外部点击时隐藏容器的第二个函数引起的。

Answer 1

您的代码有效。无论如何，我还添加了2个其他解决方案：

jQuery('.mycart').click(function(e){

    e.preventDefault();
    $(".basket").slideToggle(800);
});

http://codepen.io/damianocel/pen/avjVGQ

我已经注释掉了一个，试着看看你最喜欢哪一个。

Answer 2

在JQuery中使用此代码

    private LinkedList<String> mPhotoList = new LinkedList<String>();
    private LinkedList<String> mPhotoListIds = new LinkedList<String>();

    private static String nextMaxId = "";
    private static String url = "";

    //onCreateView


        listView.setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {

            }

            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
                if (firstVisibleItem + visibleItemCount == totalItemCount && totalItemCount != 0) {
                    if (flag_loading == false) {
                        flag_loading = true;
                        new DownloadTask(true).execute();
                    }
                }
            }
        });
        if (mInstagramSession.isActive()) {
            new DownloadTask(false).execute();
        }





    ProgressDialog pDialog;

    public class DownloadTask extends AsyncTask<URL, Integer, Long> {

        private boolean isBeingPaginated = false;

        public DownloadTask(boolean isBeingPaginated) {
            this.isBeingPaginated = isBeingPaginated;
        }

        protected void onCancelled() {

        }

        protected void onPreExecute() {
            pDialog = new ProgressDialog(getActivity());
            pDialog.setMessage("Getting Feeds...");
            pDialog.setIndeterminate(false);
            pDialog.setCancelable(false);
            pDialog.show();
        }

        protected Long doInBackground(URL... urls) {
            long result = 0;


            try {
                List<NameValuePair> params = new ArrayList<>(1);
                params.add(new BasicNameValuePair("count", "10"));


                if (isBeingPaginated) {
                    url = "https://api.instagram.com/v1/tags/self/media/recent?access_token=" + mInstagramSession.getAccessToken() + "&max_id=" + nextMaxId;

                    params.add(new BasicNameValuePair("next_url", url));
                }

                InstagramRequest request = new InstagramRequest(
                        mInstagramSession.getAccessToken());
                String response = request.createRequest("GET",
                        "/users/self/feed", params);

                if (!response.equals("")) {
                    JSONObject jsonObj = (JSONObject) new JSONTokener(response)
                            .nextValue();
                    JSONArray jsonData = jsonObj.getJSONArray("data");
                    JSONObject jsonPaginatioNData = jsonObj.getJSONObject("pagination");

                    //Fetching nextMaxId
                    if (jsonPaginatioNData.length() > 0) {
                        //JSONObject paginationJsonObject = jsonPaginatioNData.getJSONObject(0);
                        nextMaxId = jsonPaginatioNData.getString("next_max_id");
                        Log.d("max", nextMaxId);
                        isBeingPaginated = true;

                    }

                    int length = jsonData.length();
                    flag_loading = false;

                    if (length > 0) {

                        for (int i = 0; i < length; i++) {
                            JSONObject jsonPhoto = jsonData.getJSONObject(i)
                                    .getJSONObject("images")
                                    .getJSONObject("low_resolution");
                            JSONObject jsonUser = jsonData.getJSONObject(i)
                                    .getJSONObject("users_in_photo")
                                    .getJSONObject("user");

                            String jsonPhotoIds = jsonData.getJSONObject(i)
                                    .getString("id");
                            String jsonPhotoIds = jsonData.getJSONObject(i)
                                    .getString("id");
                            Log.d("ID: ", jsonPhotoIds);

                            mPhotoList.addjsonPhoto.getString("url")
                            mPhotoListIds.add(jsonPhotoIds);
                        }
                    }
                }
            } catch (Exception e) {
                e.printStackTrace();
            }

            return result;
        }

        protected void onProgressUpdate(Integer... progress) {
        }

        protected void onPostExecute(Long result) {
            pDialog.dismiss();
            adapter.notifyDataSetChanged();
        }
    }

}

Answer 3

我找到了解决方案，只是通过阻止mouseup（）函数隐藏容器，如果被点击的目标是锚jQuery('.mycart').click(function(e){ e.preventDefault(); var target = jQuery(".basket"); if(target.is(':visible')) jQuery('.basket').css('cssText', 'display: none !important'); else jQuery('.basket').css('cssText', 'display: block !important'); }); jQuery(document).mouseup(function (e){ var container =jQuery(".basket"); if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0 && !jQuery('.mycart').is(e.target)) // ... nor a descendant of the container or .mycart anchor { container.hide(); } });，那么当用户点击这个锚时，click（）函数就是这个锚将被正常应用并隐藏容器（如果显示的话，这里是新的jquery：

）

{{1}}

Answer 4

试试这个......

jQuery('.mycart').click(function(e) {
    e.preventDefault();
    var target = jQuery(".basket");
    if(target.is(':visible')) {
        jQuery('.basket').css('cssText', 'display: none !important');
    } else {
        jQuery('.basket').css('cssText', 'display: block !important');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="cart mycart" href="#">My Cart</a>
<div class="basket">
    <span class="callout-arrow"></span>
    <div class="basketcount"><span>5</span></div>
    <button type="button" class="checkoutbtn">checkout</button>
</div>

如何显示/隐藏项目onclick jquery

4 个答案: